HTML <fieldset> 标签

在html中，fieldset 标签内容的周围将绘制边框，通常使用来将表单内的相关元素分组，在相关表单元素周围绘制边框。我们还可以使用 legend 标签来为 fieldset 元素设置标题。

实例

组合表单中的相关元素：

<!DOCTYPE HTML>
<html>
<body>
<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text">
    体重：<input type="text">
  </fieldset>
</form>
<p>如果表单周围没有边框，说明您的浏览器太老了。</p>
</body>
</html>

运行一下

浏览器支持

元素
<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 中的事件属性。

更多实例

<!DOCTYPE html>
<html>
<head>
<style>
fieldset {
  background-color: #eeeeee;
}
legend {
  background-color: gray;
  color: white;
  padding: 5px 10px;
}
input {
  margin: 5px;
}
</style>
</head>
<body>
<h1>fieldset 元素 + CSS</h1>
<form action="/example/html/html_form.aspx">
 <fieldset>
  <legend>Personalia:</legend>
  <label for="fname">姓氏:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">名字:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <label for="birthday">生日:</label>
  <input type="date" id="birthday" name="birthday"><br><br>
  <input type="submit" value="Submit">
 </fieldset>
</form>
</body>
</html>