<fieldset>: 字段集元素

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

此元素包含 全局属性。

disabled

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

form

此属性取您想要 <fieldset> 所属的 id 属性的值，即使它不在表单中。请注意，此用法会让人感到困惑——如果您希望 <fieldset> 内部的 <input> 元素与表单相关联，您需要直接在这些元素上使用 form 属性。您可以使用 JavaScript 通过 HTMLFormElement.elements 检查哪些元素与表单相关联。

名称

与该组关联的名称。

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

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

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

如果存在 <legend>，它将放置在 block-start 边框之上。<legend> 会自动缩小，并且还会建立一个格式化上下文。display 值会变成块级。（例如，display: inline 会表现为 block。）

将有一个匿名框包含 <fieldset> 的内容，它从 <fieldset> 继承某些属性。如果 <fieldset> 使用 display: grid 或 display: inline-grid 进行样式化，则匿名框将是一个网格格式化上下文。如果 <fieldset> 使用 display: flex 或 display: inline-flex 进行样式化，则匿名框将是一个弹性盒格式化上下文。否则，它将建立一个块级格式化上下文。

您可以随意使用任何您想要的方式来设置 <fieldset> 和 <legend> 的样式，以符合您的页面设计。

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

<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>

结果

此示例显示了一个禁用的 <fieldset>，其中包含两个控件。请注意，由于这两个控件都在一个禁用的 <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>

结果

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