<fieldset>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
HTML <fieldset>
元素用于对表单中的控制元素进行分组(也包括 label 元素)。
尝试一下
属性
使用 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 content, sectioning root, listed, form-associated element, palpable content. |
---|---|
允许的内容 | 可选的<legend> 元素,后面是内容流(flow content) |
标签省略 | 不允许,开始标签和结束标签都不能省略。 |
允许的父元素 | Any element that accepts flow content. |
默认 ARIA role | group |
允许的 ARIA roles | radiogroup , presentation , none |
DOM 接口 | HTMLFieldSetElement |
规范
Specification |
---|
HTML Standard # the-fieldset-element |
浏览器兼容性
BCD tables only load in the browser
[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]
.