<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

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
fieldset
disabled
form
name

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
See implementation notes.
Has more compatibility info.

參見