<fieldset>：字段集元素

试一试

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster" value="K" />
    <label for="kraken">Kraken</label><br />

    <input type="radio" id="sasquatch" name="monster" value="S" />
    <label for="sasquatch">Sasquatch</label><br />

    <input type="radio" id="mothman" name="monster" value="M" />
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

legend {
  background-color: black;
  color: white;
  padding: 3px 6px;
}

input {
  margin: 0.4rem;
}

如上例所示，<fieldset> 元素为 HTML 表单的一部分提供了分组，其中嵌套的 <legend> 元素为 <fieldset> 提供了标题。它包含少量属性，其中最显著的是 form（可以包含同一页面上 <form> 的 id，允许你将 <fieldset> 作为该 <form> 的一部分，即使它没有嵌套在其中）和 disabled（允许你一次性禁用 <fieldset> 及其所有内容）。

属性

此元素包含全局属性。

disabled

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

form

此属性的值是您希望 <fieldset> 所属的 <form> 元素的 id 属性的值，即使它不在表单内部。请注意，这种用法容易混淆 — 如果您希望 <fieldset> 内部的 <input> 元素与表单关联，您需要直接在这些元素上使用 form 属性。您可以使用 JavaScript 通过 HTMLFormElement.elements 检查哪些元素与表单关联。

name

与该组关联的名称。

注意：字段集的标题由嵌套在其内部的第一个 <legend> 元素提供。

使用 CSS 样式

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

示例

基本字段集

此示例包含一个带有 <legend> 的 <fieldset>，其中包含一个控件。

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

结果

技术摘要

规范

浏览器兼容性

另见

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