HTML宝典(第 1 版)
3.3.8 fieldset控件
阅读(

HTML基础

HTML元素

表单及应用

什么是表单

Form元素

表单控件

meter控件

progress控件

keygen控件

select控件

textarea控件

input控件

label控件

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控件
图3-29 fieldset控件

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

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验