<fieldset>: The Field Set element
<fieldset> HTML element is used to group several controls as well as labels (
<label>) within a web form.
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 of a
<form> on the same page, allowing you to make the
<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.
This element includes the global attributes.
If 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>. 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.
This attribute takes the value of the
idattribute 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
The name associated with the group.
Note: The caption for the fieldset is given by the first
<legend>element nested inside it.
Styling with CSS
There are several special styling considerations for
display value is
block 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
groove border surrounding the contents, and a small amount of default padding. The element has
min-inline-size: min-content by default.
<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
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
<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>Do you agree?</legend> <input type="checkbox" id="chbx" name="agree" value="Yes!" /> <label for="chbx">I agree</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
<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>
|Content categories||Flow content, sectioning root, listed, form-associated element, palpable content.|
|Tag omission||None, both the starting and ending tag are mandatory.|
|Permitted parents||Any element that accepts flow content.|
|Implicit ARIA role||
|Permitted ARIA roles||
|HTML Standard |
BCD tables only load in the browser