--- title:
slug: Web/HTML/Element/fieldset tags: - Element - HTML - HTML表单 - 元素 - 参考 - 表单 translation_of: Web/HTML/Element/fieldset ---
{{HTMLRef}}
HTML <fieldset> 元素用于对表单中的控制元素进行分组（也包括 label 元素）。
{{EmbedInteractiveExample("pages/tabbed/fieldset.html", "tabbed-standard")}}
如上述例子所示，<fieldset> 元素将一个HTML表单的一部分组成一组，内置了一个 {{htmlelement("legend")}} 元素作为 fieldset 的标题。这个元素有几个属性，最值得注意的是 form，其可以包含同一页面的 {{htmlelement("form")}} 元素的 id，以使 <fieldset> 成为这个 <form> 的一部分，即使 <fieldset> 不在其内。还有 disabled 属性，可将 <fieldset> 及其所有内容设置为不可用。

属性

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

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

使用 CSS 样式

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

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

如果其中有 {{htmlelement("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 不能在 {{HTMLElement("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.
允许的内容 可选的{{HTMLElement("legend")}} 元素，后面是内容流（flow content）
标签省略 {{no_tag_omission}}
允许的父元素 Any element that accepts flow content.
默认 ARIA role {{ARIARole("group")}}
允许的 ARIA roles {{ARIARole("radiogroup")}}, {{ARIARole("presentation")}}, {{ARIARole("none")}}
DOM 接口 {{domxref("HTMLFieldSetElement")}}

规范

规范 状态 注释
{{SpecName('HTML WHATWG', 'forms.html#the-fieldset-element', '<fieldset>')}} {{Spec2('HTML WHATWG')}} Definition of the fieldset element
{{SpecName('HTML5 W3C', 'forms.html#the-fieldset-element', '<fieldset>')}} {{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'interact/forms.html#h-17.10', '<fieldset>')}} {{Spec2('HTML4.01')}} Initial definition

浏览器兼容性

{{Compat("html.elements.fieldset")}}

[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].

参见