這節(jié)課，我們學(xué)習(xí)表單的分組控件。

　　來(lái)看"疫情流調(diào)信息表"案例，我們清楚的看到，信息表中有兩組邊框，把用戶需要填寫的內(nèi)容劃分成了兩個(gè)區(qū)域：一個(gè)基本信息區(qū)域，一個(gè)保密信息區(qū)域。那這樣帶有邊框和標(biāo)題的表單控件是如何實(shí)現(xiàn)的呢?

　　分組控件最外層使用 fieldset 標(biāo)簽，語(yǔ)法為: 尖角號(hào) fieldset，尖角號(hào)/fieldset。fieldset是字段集的意思，引申為表單控件分組。

　　里面包裹 legend 標(biāo)簽，語(yǔ)法為: 尖角號(hào) legend，尖角號(hào)/ legend。legend是說(shuō)明的意思，它給 fieldset 元素定義了一個(gè)標(biāo)題。

　　打開編輯器，新建一個(gè) fieldset_legend.html 頁(yè)面，編寫完成基礎(chǔ)代碼，在 body 里面添加一個(gè) fieldset 標(biāo)簽。

　　在瀏覽器中打開頁(yè)面，這時(shí)頁(yè)面出現(xiàn)了一個(gè)閉合的邊框，邊框的作用就是為了將相關(guān)字段進(jìn)行視覺(jué)上的區(qū)塊劃分。

　　返回編輯其中，在 fieldset 標(biāo)簽里添加 legend 標(biāo)簽，在legend 標(biāo)簽里添加"基礎(chǔ)信息"作為分組標(biāo)題。保存。

　　回到瀏覽器，刷新。分組的標(biāo)題也定義好了。

　　也許你會(huì)問(wèn)，其他的表單控件寫在哪里呢?在分組標(biāo)簽中添加其他控件，需要放置到legend 標(biāo)簽的后邊。

　　回到編輯器，在legend 標(biāo)簽結(jié)束的位置，回車換行。

　　輸入 "用戶名 : " ，編寫一個(gè)輸入框，br 換行。輸入"密碼: " ，再編寫一個(gè)密碼框。保存。

　　回到瀏覽器，刷新。一個(gè)基礎(chǔ)信息的表單分組就做好了。

　　表單分組就講到這里，留個(gè)作業(yè)：自己動(dòng)手完成一個(gè)保密信息的分組。加油!

上一篇

如何做用戶分層?

下一篇

表單綜合案例（上）