HTML 参考手册

HTML 标签大全

HTML: <fieldset> 标签

HTML <fieldset>标记位于 <form>标记内,用于对HTML表单中的相关元素进行分组。使用 <legend>标记为 <fieldset>创建标题。该标记通常也称为 <fieldset>元素。

在线示例

对表单中的相关元素进行分组:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 fieldset标签的使用(菜鸟教程 (cainiaojc.com))</title>
</head>
<body>
<form>
  <fieldset>
    <legend>客户资料(cainiaojc.com)</legend>
    名称: <input type="text"><br>
    地址: <input type="text"><br>
    电话号码: <input type="text">
  </fieldset>
</form>
</body>
</html>
测试看看 ‹/›

运行后效果如下:

图片.png

浏览器兼容性

IEFirefoxOperaChromeSafari

所有主流浏览器都支持 <fieldset> 标签。

标签定义及使用说明

<fieldset> 标签可以将表单内的相关元素分组。

<fieldset> 标签会在相关表单元素周围绘制边框。

大多数浏览器会在<fieldset>标记周围呈现黑色边框,但是您可以使用CSS更改此行为。

您可以使用<legend>标记显示<fieldset>的标题。该标题将在<fieldset>中的相关表单控件之前呈现,并看起来漂浮在<fieldset>顶部边框的上方。

提示和注意

提示:<legend> 标签为 <fieldset> 元素定义标题。

HTML 4.01 与 HTML5之间的差异

HTML5 中新增了一些 <fieldset> 的新属性:disabled、form、name,HTML 4.01 中不支持这些属性。

属性

属性描述
disabledHTML5disabled规定该组中的相关表单元素应该被禁用。
formHTML5form_id规定 fieldset 所属的一个或多个表单。
nameHTML5text规定 fieldset 的名称。

全局属性

<fieldset> 标签支持 HTML 的全局属性

事件属性

<fieldset> 标签支持 HTML 的事件属性