<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.
嘗試一下
屬性
此元素包括全局屬性。
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
一樣。默認情況下,周圍有一個 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>
結果
技術摘要
內容類別 | 流內容、章節根、listed、表單相關內容類型的元素、捫及內容。 |
---|---|
允許的內容 |
一個可選的 <legend> 元素,後跟流內容。
|
標籤省略 | 不允許,開始和結束標籤都是必需的。 |
允許的父元素 | 任何接受流內容的元素。 |
隱含的 ARIA 角色 | group |
允許的 ARIA 角色 |
radiogroup 、presentation 、none
|
DOM 介面 | HTMLFieldSetElement |
規範
Specification |
---|
HTML Standard # the-fieldset-element |
瀏覽器相容性
BCD tables only load in the browser