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