<fieldset>:欄集元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<fieldset> HTML 元素用於在網頁表單中將多個控件以及標籤(<label>)分組。

嘗試一下

正如上面的範例所示,<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> 元素提供。

使用 CSS 進行樣式設置

對於 <fieldset>,有一些特殊的樣式考慮因素。

它的 display 默認值為 block,並建立了一個塊格式化上下文。如果 <fieldset> 以內聯級別的 display 值進行樣式設置,則其行為將像 inline-block 一樣,否則將像 block 一樣。默認情況下,周圍有一個 2pxgroove 邊框圍繞內容,並有一小部分默認填充。元素默認具有 min-inline-size: min-content

如果存在 <legend>,則其位於 block-start 邊框之上。<legend> 將會縮小包裹,並且也會建立一個格式化上下文。display 值被轉換為塊級別。(例如,display: inline 行為與 block 一樣。)

將有一個匿名框來容納 <fieldset> 的內容,它會從 <fieldset> 繼承某些屬性。如果 <fieldset> 被設置為 display: griddisplay: inline-grid,則匿名框將是一個網格格式化上下文。如果 <fieldset> 被設置為 display: flexdisplay: inline-flex,則匿名框將是一個彈性格式化上下文。否則,它將建立一個塊格式化上下文。

你可以隨意設計 <fieldset><legend> 的樣式,以適應你的頁面設計。

範例

簡單的欄集

此範例展示了一個非常簡單的 <fieldset> 範例,帶有一個 <legend> 和一個內部的控件。

html
<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> 內部,因此兩個控件都被禁用。

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

結果

技術摘要

內容類別 流內容章節根listed表單相關內容類型的元素、捫及內容。
允許的內容 一個可選的 <legend> 元素,後跟流內容。
標籤省略 不允許,開始和結束標籤都是必需的。
允許的父元素 任何接受流內容的元素。
隱含的 ARIA 角色 group
允許的 ARIA 角色 radiogrouppresentationnone
DOM 介面 HTMLFieldSetElement

規範

Specification
HTML Standard
# the-fieldset-element

瀏覽器相容性

BCD tables only load in the browser

參見