<fieldset>: The Field Set element

如上例所示，<fieldset> 元素为 HTML 表单的一部分提供分组，嵌套的 <legend> 元素为 <fieldset> 提供标题。它需要几个属性，其中最值得注意的是 form，它可以包含同一页面上 <form> 的 id，允许你将 <fieldset> 作为 <form> 的一部分，即使它没有嵌套在其中，以及 disabled，它允许 你可以一次性禁用 <fieldset> 及其所有内容。

¥As the example above shows, the <fieldset> element provides a grouping for a part of an HTML form, with a nested <legend> element providing a caption for the <fieldset>. It takes few attributes, the most notable of which are form, which can contain the id of a <form> on the same page, allowing you to make the <fieldset> part of that <form> even if it is not nested inside it, and disabled, which allows you to disable the <fieldset> and all its contents in one go.

¥Attributes

该元素包括 全局属性。

¥This element includes the global attributes.

disabled

如果设置了此布尔属性，则所有属于 <fieldset> 后代的表单控件都将被禁用，这意味着它们不可编辑，并且不会与 <form> 一起提交。他们不会收到任何浏览事件，例如鼠标单击或与焦点相关的事件。默认情况下，浏览器将此类控件显示为灰色。请注意，<legend> 元素内的表单元素不会被禁用。

form

此属性采用你希望 <fieldset> 所属的 <form> 元素的 id 属性的值，即使它不在表单内。请注意，这种用法很令人困惑 - 如果你希望 <fieldset> 内的 <input> 元素与表单关联，则需要直接在这些元素上使用 form 属性。你可以使用 HTMLFormElement.elements.通过 JavaScript 检查哪些元素与表单关联。

name

与组关联的名称。

注意：字段集的标题由嵌套在其中的第一个 <legend> 元素给出。

¥Note: The caption for the fieldset is given by the first <legend> element nested inside it.

¥Styling with CSS

<fieldset> 有几个特殊的样式注意事项。

¥There are several special styling considerations for <fieldset>.

它的 display 值默认是 block，它建立了一个 块格式化上下文。如果 <fieldset> 使用内联级 display 值进行样式化，则它将表现为 inline-block，否则它将表现为 block。默认情况下，内容周围有 2px groove 边框，以及少量默认填充。默认情况下，该元素具有 min-inline-size: min-content。

¥Its display value is block by default, and it establishes a block formatting context. If the <fieldset> is styled with an inline-level display value, it will behave as inline-block, otherwise it will behave as block. By default there is a 2px groove border surrounding the contents, and a small amount of default padding. The element has min-inline-size: min-content by default.

如果存在 <legend>，则将其放置在 block-start 边界上方。<legend> 收缩封装，并且还建立格式化上下文。display 值已被阻止。（例如，display: inline 的行为与 block 相同。）

¥If a <legend> is present, it is placed over the block-start border. The <legend> shrink-wraps, and also establishes a formatting context. The display value is blockified. (For example, display: inline behaves as block.)

将有一个匿名框保存 <fieldset> 的内容，它继承了 <fieldset> 的某些属性。如果 <fieldset> 采用 display: grid 或 display: inline-grid 样式，则匿名框将是网格格式化上下文。如果 <fieldset> 采用 display: flex 或 display: inline-flex 样式，则匿名框将是 Flex 格式化上下文。否则，它会建立一个块格式化上下文。

¥There will be an anonymous box holding the contents of the <fieldset>, which inherits certain properties from the <fieldset>. If the <fieldset> is styled with display: grid or display: inline-grid, then the anonymous box will be a grid formatting context. If the <fieldset> is styled with display: flex or display: inline-flex, then the anonymous box will be a flex formatting context. Otherwise, it establishes a block formatting context.

你可以随意以适合你的页面设计的任何方式设置 <fieldset> 和 <legend> 的样式。

¥You can feel free to style the <fieldset> and <legend> in any way you want to suit your page design.

¥Examples

¥Simple fieldset

此示例显示了一个非常简单的 <fieldset> 示例，其中包含 <legend> 和单个控件。

¥This example shows a really simple <fieldset> example, with a <legend>, and a single control inside it.

<form action="#">
  <fieldset>
    <legend>Do you agree?</legend>
    <input type="checkbox" id="chbx" name="agree" value="Yes!" />
    <label for="chbx">I agree</label>
  </fieldset>
</form>

结果

¥Result

¥Disabled fieldset

此示例显示了一个禁用的 <fieldset>，其中有两个控件。请注意这两个控件如何由于位于禁用的 <fieldset> 内而被禁用。

¥This example shows a disabled <fieldset> with two controls inside it. Note how both the controls are disabled due to being inside a disabled <fieldset>.

<form action="#">
  <fieldset disabled>
    <legend>Disabled login 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>

结果

¥Result

¥Technical summary

¥See also

• <legend> 元素
• <input> 元素
• <label> 元素
• <form> 元素