<fieldset>：欄集元素

正如上面的範例所示，<fieldset> 元素為 HTML 表單的一部分提供了分組功能，其中嵌套的 <legend> 元素為 <fieldset> 提供了標題。它有一些屬性，其中最顯著的是 form，它可以包含同一頁面上的 <form> 的 id，這允許你將 <fieldset> 作為該 <form> 的一部分，即使它不在其中，以及 disabled，它允許你一次性禁用 <fieldset> 及其所有內容。

此元素包括全局屬性。

disabled

如果設置了這個布爾屬性，則所有位於 <fieldset> 下的表單控件都會被禁用，這意味著它們是不可編輯的，並且不會隨著 <form> 一起提交。它們將不會接收任何瀏覽事件，比如鼠標點擊或焦點相關事件。默認情況下，瀏覽器會將此類控件顯示為灰色。請注意，位於 <legend> 元素內的表單元素將不會被禁用。

form

這個屬性接受一個 <form> 元素的 id 屬性的值，你希望 <fieldset> 成為該表單的一部分，即使它不在表單內。請注意，這種用法很混亂——如果你希望 <fieldset> 內的 <input> 元素與表單關聯，則需要直接在這些元素上使用 form 屬性。你可以使用 JavaScript 來檢查哪些元素與表單關聯，使用 HTMLFormElement.elements。

name

與該組關聯的名稱。

備註： <fieldset> 的標題由嵌套在其中的第一個 <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>

結果

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