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