3.3.8 fieldset控件

如果一个表单上有很多信息需要填写，可以使用 fieldset控件将相关的元素组合在一起，使表单更容易理解。表单越容易理解，访问者就越有可能正确地填写表单。

fieldset即field set，顾名思义，就是表单中field的集合。从名称就能知道，它会生成 field 的集合，用于对表单中的元素进行分组。一个表单中可以有多个fieldset控件。

为了识别每个 fieldset控件的作用，还可以使用 legend元素为每个 fieldset控件提供一个标题（caption），用于描述每个组的目的。legend元素是 fieldset元素的第一个子元素。如：

<fieldset>
   <legend>基本信息</legend>
   <p><label>用 户 名：</label><input type="text" name="username" /></p>
   <p><label>密　　码：</label><input type="password" name="pass1" /></p>
   <p><label>确认密码：</label><input type="password" name="pass2" /></p>
   <p><label>　E-Mail：</label><input type="email" name="email" /></p>
</fieldset>

浏览器会以特殊方式来显示 fieldset控件，一般会为每个分组添加一个边框，把 fieldset控件 中的所有元素包围起来，让用户很容易就能看出它们是一组。运行结果如图 3‑29 所示：

当然，如果你不喜欢浏览器的默认样式，也可以自己为 fieldset元素和 legend元素添加样式，让表单更吸引人，更便于使用。