Choose your favorite monster <input type="radio" id="kraken" name="monster" value="K" />
<label for="kraken">Kraken</label><br />
<input type="radio" id="sasquatch" name="monster" value="S" />
<label for="sasquatch">Sasquatch</label><br />
<input type="radio" id="mothman" name="monster" value="M" />
<label for="mothman">Mothman</label>
</fieldset>
</form>
:::
:::
::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”}
::: {#css-editor}
legend {
background-color: #000;
color: #fff;
padding: 3px 6px;
}
input {
margin: 0.4rem;
}
:::
:::
::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”}
::: {#js-editor}
:::
:::
:::
::: {#output .output-container}
Output
# :::
:::
::: {.section .console-container .hidden aria-hidden=“true”}
Console Output
# ![]
clear console
::: {#console .console}
:::
:::
::: {#html-output .output .editor-tabbed}
%html-content%
:::
:::
As the example above shows, the <fieldset> element provides a grouping
for a part of an HTML form, with a nested
<legend><fieldset>. It takes few attributes, the
most notable of which are form, which can contain the id of a
<form><fieldset>
part of that <form> even if it is not nested inside it, and
disabled, which allows you to disable the <fieldset> and all its
contents in one go.
:::
Attributes
# ::: section-content
This element includes the
global attributes .
disabledIf this Boolean attribute is set, all form controls that are
descendants of the <fieldset>, are disabled, meaning they are not
editable and won't be submitted along with the
<form><legend>
formThis attribute takes the value of the
id<form><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><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
nameThe name associated with the group.
::: {#sect1 .notecard .note}
Note: The caption for the fieldset is given by the first
<legend>
Styling with CSS
# ::: section-content
There are several special styling considerations for <fieldset>.
Its
displayblock by default, and it establishes a
block formatting
context .
If the <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
If a
<legend>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>. If the
<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.
:::
Examples
# Simple fieldset
# ::: section-content
This example shows a really simple <fieldset> example, with a
<legend>, and a single control inside it.
::: code-example
[html]{.language-name}
<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>
:::
Result
# ::: {#sect2 .code-example}
::: iframe
:::
:::
:::
Disabled fieldset
# ::: section-content
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>.
::: code-example
[html]{.language-name}
<form action="#">
<fieldset disabled>
<legend>Disabled login fieldset</legend>
<label for="name">Name: </label>
<input type="text" id="name" value="Chris" />
<label for="pwd">Archetype: </label>
<input type="password" id="pwd" value="Wookie" />
</fieldset>
</form>
:::
Result
# ::: {#sect3 .code-example}
::: iframe
:::
:::
:::
Technical summary
# ::: section-content
:::
Specifications
# ::: _table
# Specification
# HTML Standard
:::
Browser compatibility
# ::: _table
# Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox Opera Safari Samsung Internet
for Android on IOS
Android
fieldset 1 12 1 Yes ≤15 ≤4 4.4 18 4 ≤14 ≤3.2 1.0
Before version 86, this element did Before version 86, this element did not support `flexbox` and `grid` layouts within Before version 86, this element did Before version 86, this element did Before version 14.0, this element
not support `flexbox` and `grid` this element. See [bug not support `flexbox` and `grid` not support `flexbox` and `grid` did not support `flexbox` and `grid`
layouts within this element. See 4511145](https://developer.microsoft.com/microsoft-edge/platform/issues/4511145/). layouts within this element. See layouts within this element. See layouts within this element. See
[bug [bug [bug [bug
262679](https://crbug.com/262679). 262679](https://crbug.com/262679). 262679](https://crbug.com/262679). 262679](https://crbug.com/262679).
disabled 20 12 4 Yes 12 6 4.4 25 4 12 6 1.5
Does not work with nested fieldsets. For example: Not all form control descendants of a disabled fieldset are properly disabled in IE11; see IE [bug 817488: input\[type=\'file\'\] not
`<fieldset disabled><fieldset><!--Still enabled--></fieldset></fieldset>` disabled inside disabled fieldset](https://connect.microsoft.com/IE/feedbackdetail/view/817488) and IE [bug 962368: Can still edit
input\[type=\'text\'\] within
fieldset\[disabled\]](https://connect.microsoft.com/IE/feedbackdetail/view/962368/can-still-edit-input-type-text-within-fieldset-disabled).
form 1 12 1 Yes 15 3 4.4 18 4 14 2 1.0
name 19 12 4 Yes 15 6 4.4 25 4 14 6 1.5
# :::
See also
# ::: section-content
::: _attribution
© 2005–2023 MDN contributors.https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset {._attribution-link}
:::