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

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

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

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

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

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

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

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

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

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

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

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

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

上一篇

如何做用戶分層?

下一篇

表單綜合案例（上）