<fieldset>: The FIELDSET Element
Last updated: 2026-10-13
<fieldset>The FIELDSET Element
Groups related form controls and shows an optional legend, improving readability and accessibility.
| Category | Forms |
|---|---|
| Content Model | Flow content |
| Allowed Parents | Any element that accepts flow content |
| Content Tag | Yes — requires closing </fieldset> tag |
| Status | Standard |
📝 Syntax
<fieldset>
<legend>Group title</legend>
...controls...
</fieldset>⚙️ Attributes
This element supports the global attributes plus the following:
| Attribute | Value | Description |
|---|---|---|
name | Group name submitted with the form. | |
disabled | Disables all controls inside. | |
form | The id of the associated form. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <fieldset> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： fieldset has a default border (removable via CSS); disabling it disables all inner controls.
❓ FAQ
QWhat does fieldset do?
A
<fieldset> groups related form controls (a shipping-address group, a payment-method group), with a border by default and a <legend> for the group title. Screen readers announce the group name before its controls — a big win for long forms.QCan I remove the fieldset border?
AYes:
fieldset { border: none; padding: 0; margin: 0; }. Removing the visuals does not remove the semantics — the grouping and legend keep their accessibility value. A textbook example of semantics and styling being decoupled.QWhat does the disabled attribute on fieldset do?
AAdding
disabled to a <fieldset> disables every control inside it (including descendants) in one move — perfect for a read-only order-confirmation step. Far cleaner than adding disabled control by control.🏷️ Related Tags
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
