HTML fieldset控件

HTML 宝典 专栏收录该内容
93 篇文章 6 订阅

fieldset控件

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

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

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


  1. <fieldset>
  2.    <legend>基本信息</legend>
  3.    <p><label>用 户 名:</label><input type="text" name="username" /></p>
  4.    <p><label>密  码:</label><input type="password" name="pass1" /></p>
  5.    <p><label>确认密码:</label><input type="password" name="pass2" /></p>
  6.    <p><label> E-Mail:</label><input type="email" name="email" /></p>
  7. </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用户指南》,并全部在 GitHub 上开源。

版权声明:本文出自 歪脖网 的《HTML宝典》,欢迎在线阅读,并提出宝贵意见。

  • 3
    点赞
  • 1
    评论
  • 11
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值