HTML <fieldset> 标签 详解
HTML基础 2022-06-02 09:40:15小码哥的IT人生shichen
HTML <fieldset> 标签
实例
组合表单中的相关元素：
<form>
<fieldset>
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>
</form>
完整实例【亲自试一试】：
<!DOCTYPE HTML>
<html>
<body>
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
<p>如果表单周围没有边框，说明您的浏览器太老了。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
浏览器支持
| 元素 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <fieldset> | Yes | Yes | Yes | Yes | Yes |
所有浏览器都支持 <fieldset> 标签。
定义和用法
fieldset 元素可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。
当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
<fieldset> 标签没有必需的或唯一的属性。
<legend> 标签为 fieldset 元素定义标题。
HTML 4.01 与 HTML 5 之间的差异
HTML5 拥有如下属性：disabled、form、name，HTML 4.01 中不支持这些属性。
属性
| 属性 | 值 | 描述 |
|---|---|---|
| disabled | disabled | 规定应该禁用 fieldset。 |
| form | form_id | 规定 fieldset 所属的一个或多个表单。 |
| name | value | 规定 fieldset 的名称。 |
全局属性
<fieldset> 标签支持 HTML 中的全局属性。
事件属性
<fieldset> 标签支持 HTML 中的事件属性。
相关页面
HTML DOM 参考手册：Fieldset 对象
TIY 实例
完整实例【围绕数据的 Fieldset】：
<!DOCTYPE HTML>
<html>
<body>
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
<p>如果表单周围没有边框，说明您的浏览器太老了。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例演示如何在数据周围绘制一个带标题的框。
相关阅读
- HTML <div> 标签的 align 属性 详解
- HTML <dir> 标签的 compact 属性 详解
- HTML <command> 标签的 type 属性 详解
- HTML <command> 标签的 radiogroup 属性 详解
- HTML <command> 标签的 label 属性 详解
- HTML <command> 标签的 icon 属性 详解
- HTML <command> 标签的 disabled 属性 详解
- HTML <command> 标签的 checked 属性 详解
- HTML <colgroup> 标签的 width 属性 详解
- HTML <colgroup> 标签的 valign 属性 详解
