<fieldset> and <legend>
The <fieldset> element groups related form controls, often with a <legend> that names the group. It gives larger forms stronger structure and meaning.
Overview
The <fieldset> element groups related form controls, often with a <legend> that names the group. It gives larger forms stronger structure and meaning.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | ≤4 | 18 | ≤3.2 | |
| HTML attribute | ||||||
| The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants. | 20 | 79 | 4 | 6 | 25 | 6 |
| The form HTML attribute associates a form-associated element with a form element within the same document. This attribute applies to the button, fieldset, input, object, output, select, and textarea elements. | 1 | 12 | 1 | 3 | 18 | 2 |
name | 19 | 12 | 4 | 6 | 25 | 6 |
| DOM API | ||||||
| The HTMLFieldSetElement interface provides special properties and methods (beyond the regular HTMLElement interface it also has available to it by inheritance) for manipulating the layout and presentation of elements. | 1 | 12 | 1 | 3 | 18 | 1 |
| The disabled property of the HTMLFieldSetElement interface is a boolean value that reflects the fieldset element's disabled attribute, which indicates whether the control is disabled. | 20 | 12 | 4 | 6 | 25 | 6 |
| The elements read-only property of the HTMLFieldSetElement interface returns an HTMLCollection object containing all form control elements (button, fieldset, input, object, output, select, and textarea) that are descendants of this field set. | 21 | 17 | 4 | 7 | 25 | 7 |
elements (type HTMLCollection) Returns an `HTMLCollection` | 57 | ≤18 | 4 | 13 | 57 | 13 |
| The form read-only property of the HTMLFieldSetElement interface returns an HTMLFormElement object that owns this fieldset, or null if this fieldset is not owned by any form. | 1 | 12 | 1 | 3 | 18 | 1 |
| The name property of the HTMLFieldSetElement interface indicates the name of the fieldset element. It reflects the element's name attribute. | 19 | 14 | 4 | 6 | 25 | 6 |
| The type read-only property of the HTMLFieldSetElement interface returns the string "fieldset". | 19 | 17 | 4 | 6 | 25 | 6 |
| The HTMLLegendElement is an interface allowing to access properties of the legend elements. It inherits properties and methods from the HTMLElement interface. | 1 | 12 | 1 | 1 | 18 | 1 |
| The form read-only property of the HTMLLegendElement interface returns an HTMLFormElement object that owns the HTMLFieldSetElement associated with this legend, or null if this legend is not associated with a fieldset owned by a form. | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The HTML element represents a caption for the content of its parent fieldset. | 1 | 12 | 1 | 3 | 18 | 1 |
- Before version 86, this element did not support `flexbox` and `grid` layouts within this element. See bug 41027853.
- Before version 86, this element did not support `flexbox` and `grid` layouts within this element. See bug 4511145.
- Before version 86, this element did not support `flexbox` and `grid` layouts within this element. See bug 41027853.
- This browser only partially implements this feature
- This feature was removed in a later browser version (79)
- Does not work with nested fieldsets. For example: `<fieldset disabled><fieldset><!--Still enabled--></fieldset></fieldset>`
Syntax
<fieldset>
<legend>Shipping Information</legend>
<label>Name: <input type="text" name="name"></label><br>
<label>Address: <input type="text" name="address"></label>
</fieldset>Live demo
Disabledizationfieldsett
Disabled attribute in fieldset inside. allelement batchdisabledization.
Use cases
Grouped options
Wrap related radios, checkboxes, or inputs so the relationship is explicit in both the DOM and UI.
Long forms
Break complex forms into named sections that are easier to scan and validate.
Cautions
- Use fieldset for truly related controls, not as a generic visual border around arbitrary layout sections.
- A missing or vague legend weakens the value of the grouping semantics.
Accessibility
- Legends are announced as part of grouped controls, so they should clearly describe the shared purpose of the fields inside.
Related links
Powered by web-features