这节课，我们学习表单的分组控件。

　　来看"疫情流调信息表"案例，我们清楚的看到，信息表中有两组边框，把用户需要填写的内容划分成了两个区域：一个基本信息区域，一个保密信息区域。那这样带有边框和标题的表单控件是如何实现的呢?

　　分组控件最外层使用 fieldset 标签，语法为: 尖角号 fieldset，尖角号/fieldset。fieldset是字段集的意思，引申为表单控件分组。

　　里面包裹 legend 标签，语法为: 尖角号 legend，尖角号/ legend。legend是说明的意思，它给 fieldset 元素定义了一个标题。

　　打开编辑器，新建一个 fieldset_legend.html 页面，编写完成基础代码，在 body 里面添加一个 fieldset 标签。

　　在浏览器中打开页面，这时页面出现了一个闭合的边框，边框的作用就是为了将相关字段进行视觉上的区块划分。

　　返回编辑其中，在 fieldset 标签里添加 legend 标签，在legend 标签里添加"基础信息"作为分组标题。保存。

　　回到浏览器，刷新。分组的标题也定义好了。

　　也许你会问，其他的表单控件写在哪里呢?在分组标签中添加其他控件，需要放置到legend 标签的后边。

　　回到编辑器，在legend 标签结束的位置，回车换行。

　　输入 "用户名 : " ，编写一个输入框，br 换行。输入"密码: " ，再编写一个密码框。保存。

　　回到浏览器，刷新。一个基础信息的表单分组就做好了。

　　表单分组就讲到这里，留个作业：自己动手完成一个保密信息的分组。加油!

上一篇

如何做用户分层?

下一篇

表单综合案例（上）