<fieldset>

HTML <fieldset> 元素用于对表单中的控制元素进行分组(也包括 label 元素)。
如上述例子所示,<fieldset> 元素将一个HTML表单的一部分组成一组,内置了一个 <legend> 元素作为 fieldset 的标题。这个元素有几个属性,最值得注意的是 form,其可以包含同一页面的 <form> 元素的 id,以使 <fieldset> 成为这个 <form> 的一部分,即使 <fieldset> 不在其内。还有 disabled 属性,可将 <fieldset> 及其所有内容设置为不可用。

属性

 这个元素包含所有全局属性

disabled
如果设置了这个 bool 值属性, <fieldset> 的所有子代表单控件也会继承这个属性。这意味着它们不可编辑,也不会随着 <form> 一起提交。它们也不会接收到任何浏览器事件,如鼠标点击或与聚焦相关的事件。默认情况下,浏览器会将这样的控件展示为灰色。注意,<legend> 中的表单元素不会被禁用。
form
将该值设为一个 <form> 元素的 id 属性值以将 <fieldset> 设置成这个 <form> 的一部分。      
name
元素分组的名称
注意:fieldset 的标题由第一个 <legend> 子元素确定。

使用 CSS 样式

<fieldset> 有几种特别的样式方案。

它的 display 值默认为 block,因此建立了一个块级格式化上下文。如果将 <fieldset> 的 display 值设置为行内级别,则会表现为 inline-block,否则会表现为 block。默认情况下 <fieldset> 会有 2px groove 的边界围绕着内容,还有一个默认的小的内边距,还有 min-inline-size: min-content

如果其中有 <legend> 元素,会放在块级框起始处的边界上。<legend> 的宽度会根据内容尽量收缩(shrink-wrap),同时也建立了一个格式化上下文。display 值会块级化(例如  display: inline 表现为 block)。

一个匿名的框会包围 <fieldset> 的内容,这个框继承了 <fieldset> 的一些属性。如果将 <fieldset> 的样式设置为 display: grid 或 display: inline-grid,那么这个匿名框也会是栅格上下文。如果将 <fieldset> 的样式设置为 display: flex 或 display: inline-flex,则匿名框也会是弹性盒上下文。除上述情况之外,匿名框默认建立块级格式化上下文。

你可以以任意方式自行设置 <fieldset> 和 <legend> 的样式以配合你的页面设计。

注意:截至这篇文章发出为止,Microsoft Edge 和 Google Chrome 不能在 <fieldset> 中使用 flexbox 和 grid 布局。这个 GitHub issue 跟踪了这个bug。

示例

简单的 fieldset

这个例子展示了一个非常简单的 <fieldset>,其中有一个 <legend> 和一个简单的控件。

<form action="#">
  <fieldset>
    <legend>Simple fieldset</legend>
    <input type="radio" id="radio">
    <label for="radio">Spirit of radio</label>
  </fieldset>
</form>

禁用 fieldset

这个例子展示了一个被禁用的 <fieldset> ,其中有两个控件。注意随着 <fieldset> 被一起禁用的控件如何表现。

<form action="#">
  <fieldset disabled>
    <legend>Disabled fieldset</legend>
    <div>
      <label for="name">Name: </label>
      <input type="text" id="name" value="Chris">
    </div>
    <div>
      <label for="pwd">Archetype: </label>
      <input type="password" id="pwd" value="Wookie">
    </div>
  </fieldset>
</form>

技术概览

内容目录 Flow contentsectioning rootlistedform-associated element, palpable content.
允许的内容 可选的<legend> 元素,后面是内容流(flow content)
标签省略 不允许,开始标签和结束标签都不能省略。
允许的父元素 Any element that accepts flow content.
默认 ARIA role group
允许的 ARIA roles radiogroup, presentation, none
DOM 接口 HTMLFieldSetElement

规范

规范 状态 注释
HTML Living Standard
<fieldset>
Living Standard Definition of the fieldset element
HTML5
<fieldset>
Recommendation
HTML 4.01 Specification
<fieldset>
Recommendation Initial definition

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
fieldsetChrome Full support Yes
Notes
Full support Yes
Notes
Notes Does not support flexbox and grid layouts within this element. See bug 262679.
Edge Full support 12
Notes
Full support 12
Notes
Notes Does not support flexbox and grid layouts within this element. See bug 4511145.
Firefox Full support YesIE Full support YesOpera Full support Yes
Notes
Full support Yes
Notes
Notes Does not support flexbox and grid layouts within this element. See bug 262679.
Safari Full support YesWebView Android Full support Yes
Notes
Full support Yes
Notes
Notes Does not support flexbox and grid layouts within this element. See bug 262679.
Chrome Android Full support Yes
Notes
Full support Yes
Notes
Notes Does not support flexbox and grid layouts within this element. See bug 262679.
Firefox Android Full support YesOpera Android Full support Yes
Notes
Full support Yes
Notes
Notes Does not support flexbox and grid layouts within this element. See bug 262679.
Safari iOS Full support YesSamsung Internet Android Full support Yes
Notes
Full support Yes
Notes
Notes Does not support flexbox and grid layouts within this element. See bug 262679.
disabledChrome Full support YesEdge Partial support 12
Notes
Partial support 12
Notes
Notes Does not work with nested fieldsets. For example: <fieldset disabled><fieldset><!--Still enabled--></fieldset></fieldset>
Firefox Full support YesIE Full support Yes
Notes
Full support Yes
Notes
Notes Not all form control descendants of a disabled fieldset are properly disabled in IE11; see IE bug 817488: input[type='file'] not disabled inside disabled fieldset and IE bug 962368: Can still edit input[type='text'] within fieldset[disabled].
Opera Full support 12Safari Full support 6WebView Android Full support 4.4Chrome Android Full support YesFirefox Android Full support YesOpera Android ? Safari iOS Full support 6Samsung Internet Android Full support Yes
formChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
nameChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
Partial support  
Partial support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

[1] 在 IE11 中 disabled 的 fieldset 的子元素并不会全都被 disabled;  相关 Issues: IE bug 817488: input[type="file"] not disabled inside disabled fieldset and IE bug 962368: Can still edit input[type="text"] within fieldset[disabled].

参见