HTML
<fieldset>
element
is used to group several controls as well as labels (
<label>
) within a web form.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
As the example above shows, the
<fieldset>
element provides a grouping for a part of an HTML form, with a nested
<legend>
element providing a caption for the
<fieldset>
. It takes few attributes, the most notable of which are
form
, which can contain the
id
的
<form>
on the same page, allowing you to make the
<fieldset>
part of that
<form>
even if it is not nested inside it, and
被禁用
, which allows you to disable the
<fieldset>
and all its contents in one go.
此元素包括 全局属性 .
被禁用
<fieldset>
, are disabled, meaning they are not editable and won't be submitted along with the
<form>
. They won't receive any browsing events, like mouse clicks or focus-related events. By default browsers display such controls grayed out. Note that form elements inside the
<legend>
element won't be disabled.
form
id
attribute of a
<form>
element you want the
<fieldset>
to be part of, even if it is not inside the form. Please note that usage of this is confusing — if you want the
<input>
elements inside the
<fieldset>
to be associated with the form, you need to use the
form
attribute directly on those elements. You can check which elements are associated with a form via JavaScript, using
HTMLFormElement.elements
.
名称
<legend>
element nested inside it.
There are several special styling considerations for
<fieldset>
.
Its
display
value is
block
by default, and it establishes a
block formatting context
。若
<fieldset>
is styled with an inline-level
display
value, it will behave as
inline-block
, otherwise it will behave as
block
. By default there is a
2px
groove
border surrounding the contents, and a small amount of default padding. The element has
min-inline-size: min-content
在默认情况下。
若
<legend>
is present, it is placed over the
block-start
border. The
<legend>
shrink-wraps, and also establishes a formatting context. The
display
value is blockified. (For example,
display: inline
behaves as
block
)。
There will be an anonymous box holding the contents of the
<fieldset>
, which inherits certain properties from the
<fieldset>
。若
<fieldset>
is styled with
display: grid
or
display: inline-grid
, then the anonymous box will be a grid formatting context. If the
<fieldset>
is styled with
display: flex
or
display: inline-flex
, then the anonymous box will be a flex formatting context. Otherwise, it establishes a block formatting context.
You can feel free to style the
<fieldset>
and
<legend>
in any way you want to suit your page design.
This example shows a really simple
<fieldset>
example, with a
<legend>
, and a single control inside it.
<form action="#">
<fieldset>
<legend>Simple fieldset</legend>
<input type="radio" id="radio">
<label for="radio">Spirit of radio</label>
</fieldset>
</form>
This example shows a disabled
<fieldset>
with two controls inside it. Note how both the controls are disabled due to being inside a disabled
<fieldset>
.
<form action="#">
<fieldset disabled>
<legend>Disabled 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 , form-associated element, palpable content. |
|---|---|
| 准许内容 |
An optional
<legend>
element, followed by flow content.
|
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts flow content . |
| Implicit ARIA role |
group
|
| Permitted ARIA roles |
radiogroup
,
presentation
,
none
|
| DOM 接口 |
HTMLFieldSetElement
|
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of '<fieldset>' in that specification. |
实时标准 |
Definition of the
fieldset
element
|
|
HTML5
The definition of '<fieldset>' in that specification. |
推荐 | |
|
HTML 4.01 Specification
The definition of '<fieldset>' in that specification. |
推荐 | 初始定义 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
fieldset
|
Chrome
完整支持
Yes
注意事项
|
Edge
完整支持
12
注意事项
|
Firefox 完整支持 Yes | IE 完整支持 Yes |
Opera
完整支持
Yes
注意事项
|
Safari 完整支持 Yes |
WebView Android
完整支持
Yes
注意事项
|
Chrome Android
完整支持
Yes
注意事项
|
Firefox Android 完整支持 Yes |
Opera Android
完整支持
Yes
注意事项
|
Safari iOS 完整支持 Yes |
Samsung Internet Android
完整支持
Yes
注意事项
|
被禁用
|
Chrome 完整支持 Yes |
Edge
部分支持
12
注意事项
|
Firefox 完整支持 Yes |
IE
完整支持
Yes
注意事项
|
Opera 完整支持 12 | Safari 完整支持 6 | WebView Android 完整支持 4.4 | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android ? | Safari iOS 完整支持 6 | Samsung Internet Android 完整支持 Yes |
form
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
名称
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
完整支持
部分支持
兼容性未知
见实现注意事项。
<button>
<datalist>
<fieldset>
<form>
<input>
<label>
<legend>
<meter>
<optgroup>
<option>
<output>
<progress>
<select>
<textarea>