Definition of the <fieldset> tag
The <fieldset> tag is an HTML element that allows you to logically group multiple fields within a form. It visually creates a frame around the elements it contains, thus facilitating the understanding and organization of complex forms. This tag is particularly useful when you need to collect different categories of information from your users.
In combination with the <legend> tag, which allows you to assign a title to the group of fields, <fieldset> significantly improves the accessibility and user experience of your forms. If you want to perfectly master HTML forms and all their subtleties, we recommend following our complete HTML course.
Basic syntax
The syntax of the <fieldset> tag is simple. It is used as a container wrapping the <input> elements and other form fields you want to group:
<form>
<fieldset>
<legend>Personal information</legend>
<label for="lastname">Last name:</label>
<input type="text" id="lastname" name="lastname">
<label for="firstname">First name:</label>
<input type="text" id="firstname" name="firstname">
</fieldset>
</form>As you can see, the <legend> tag must be the first child element of <fieldset> for the browser to display it correctly as the group title.
Attributes of the <fieldset> tag
The <fieldset> tag accepts several attributes that allow you to control its behavior and appearance:
| Attribute | Description | Possible values |
|---|---|---|
disabled | Disables all fields contained in the fieldset | Boolean attribute (present or absent) |
form | Associates the fieldset with a specific form | ID of the target form |
name | Defines a name for the fieldset | Character string |
The disabled attribute
The disabled attribute is particularly powerful because it allows you to disable all at once all form fields contained in the <fieldset>. This is very practical for managing conditional form sections:
<form>
<fieldset disabled>
<legend>Premium options (subscribers only)</legend>
<label for="feature1">
<input type="checkbox" id="feature1" name="feature1">
Advanced feature 1
</label>
<label for="feature2">
<input type="checkbox" id="feature2" name="feature2">
Advanced feature 2
</label>
</fieldset>
</form>In this example, all fields in the fieldset are automatically disabled and cannot be modified by the user. The values of these fields will also not be sent when the form is submitted.
The form attribute
The form attribute allows you to associate a <fieldset> with a form even if it is not physically nested within it:
<form id="myForm">
<!-- Main form content -->
<button type="submit">Submit</button>
</form>
<!-- Fieldset outside the form but associated with it -->
<fieldset form="myForm">
<legend>Additional options</legend>
<label for="newsletter">
<input type="checkbox" id="newsletter" name="newsletter">
Subscribe to newsletter
</label>
</fieldset>
Practical usage examples
Let's now look at concrete use cases of the <fieldset> tag in different contexts.
Complete registration form
Here is an example of a registration form using multiple fieldsets to organize the different sections:
<form action="/registration" method="post">
<fieldset>
<legend>Login credentials</legend>
<label for="email">Email address:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label for="password-confirm">Confirm password:</label>
<input type="password" id="password-confirm" name="password-confirm" required>
</fieldset>
<fieldset>
<legend>Personal information</legend>
<label for="lastname">Last name:</label>
<input type="text" id="lastname" name="lastname" required>
<label for="firstname">First name:</label>
<input type="text" id="firstname" name="firstname" required>
<label for="birthdate">Date of birth:</label>
<input type="date" id="birthdate" name="birthdate">
</fieldset>
<fieldset>
<legend>Shipping address</legend>
<label for="address">Address:</label>
<input type="text" id="address" name="address">
<label for="city">City:</label>
<input type="text" id="city" name="city">
<label for="postal-code">Postal code:</label>
<input type="text" id="postal-code" name="postal-code">
</fieldset>
<button type="submit">Register</button>
</form>This structure allows users to immediately understand what information is requested in each section.
Grouping radio buttons
One of the most common use cases for <fieldset> is grouping radio buttons for the same question:
<form>
<fieldset>
<legend>What is your experience level in HTML?</legend>
<label>
<input type="radio" name="level" value="beginner">
Beginner
</label>
<label>
<input type="radio" name="level" value="intermediate">
Intermediate
</label>
<label>
<input type="radio" name="level" value="advanced">
Advanced
</label>
<label>
<input type="radio" name="level" value="expert">
Expert
</label>
</fieldset>
</form>Using <fieldset> with <legend> for radio button groups is an accessibility best practice recommended by WCAG guidelines. It allows screen readers to properly announce the question associated with the options.
Nested fieldsets
It is entirely possible to nest <fieldset> elements to create logical subgroups:
<form>
<fieldset>
<legend>Notification preferences</legend>
<fieldset>
<legend>By email</legend>
<label>
<input type="checkbox" name="email-promo">
Promotional offers
</label>
<label>
<input type="checkbox" name="email-news">
Weekly newsletter
</label>
</fieldset>
<fieldset>
<legend>By SMS</legend>
<label>
<input type="checkbox" name="sms-promo">
Promotional offers
</label>
<label>
<input type="checkbox" name="sms-urgent">
Urgent alerts only
</label>
</fieldset>
</fieldset>
</form>
Styling the <fieldset> tag with CSS
By default, browsers apply basic styling to <fieldset>: a border and slight padding. You can fully customize its appearance with CSS:
fieldset {
border: 2px solid #3498db;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
background-color: #f8f9fa;
}
fieldset legend {
font-weight: bold;
font-size: 1.1em;
color: #2c3e50;
padding: 0 10px;
background-color: #fff;
}
fieldset:disabled {
opacity: 0.6;
background-color: #e9ecef;
}
fieldset:disabled legend {
color: #6c757d;
}This modern style gives a more professional look to your forms while maintaining good readability.
Removing default styling
If you want to start from a neutral base and build your own style, you can reset the default styles:
fieldset {
border: none;
padding: 0;
margin: 0;
min-width: 0; /* Fix for some browsers */
}
fieldset legend {
padding: 0;
}Warning: if you completely remove the visual cues from <fieldset>, make sure to replace them with other visual indicators (spacing, background colors, etc.) to maintain good visual organization.
Accessibility and best practices
The <fieldset> tag plays a crucial role in form accessibility. Here are the best practices to follow:
Always use <legend>
Each <fieldset> should contain a descriptive <legend> tag. Without it, screen reader users won't understand the context of the field group:
<!-- ❌ Bad practice -->
<fieldset>
<label><input type="radio" name="gender"> Male</label>
<label><input type="radio" name="gender"> Female</label>
</fieldset>
<!-- ✅ Good practice -->
<fieldset>
<legend>Gender</legend>
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>
</fieldset>
Use descriptive legends
The <legend> should be descriptive enough to be understood out of context:
<!-- ❌ Too vague -->
<fieldset>
<legend>Section 1</legend>
<!-- ... -->
</fieldset>
<!-- ✅ Clear and descriptive -->
<fieldset>
<legend>Billing information</legend>
<!-- ... -->
</fieldset>
Don't overuse fieldsets
Only use <fieldset> when it's really necessary. A very simple form with only two or three fields generally doesn't need grouping:
<!-- For a simple login form, no fieldset needed -->
<form>
<label for="login-email">Email:</label>
<input type="email" id="login-email" name="email" required>
<label for="login-password">Password:</label>
<input type="password" id="login-password" name="password" required>
<button type="submit">Log in</button>
</form>
Browser compatibility
The <fieldset> tag enjoys excellent compatibility with all modern and older browsers:
| Browser | Support |
|---|---|
| Chrome | ✅ All versions |
| Firefox | ✅ All versions |
| Safari | ✅ All versions |
| Edge | ✅ All versions |
| Internet Explorer | ✅ IE6+ |
| Opera | ✅ All versions |
You can therefore use <fieldset> without any concerns about compatibility.
Difference between <fieldset> and <div>
You might be tempted to use a simple <div> to visually group your form fields. However, there are fundamental differences:
| Aspect | <fieldset> | <div> |
|---|---|---|
| Semantics | Clear meaning: group of related fields | Generic container without meaning |
| Accessibility | Announced by screen readers | Ignored by screen readers |
| Disabled attribute | Disables all child fields | Not available |
| Built-in legend | Native support with <legend> | Must be simulated with other tags |
Always prefer <fieldset> for grouping semantically related form fields. Reserve <div> for purely visual or layout needs.
Frequently asked questions
Can I use <fieldset> outside of a form?
Technically yes, the <fieldset> tag is valid outside of a <form> element. However, its main and recommended use remains grouping form fields. Using it in another context would be semantically incorrect and could confuse assistive technologies.
How can I visually hide the legend while keeping it accessible?
You can use an accessible CSS hiding technique that visually hides the element while keeping it available to screen readers:
fieldset legend.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}This approach is preferable to display: none or visibility: hidden which would also hide the element from assistive technologies.
Does the disabled attribute of fieldset work with all input types?
Yes, the disabled attribute on a <fieldset> automatically disables all form controls it contains: <input>, <button>, <select>, <textarea>, etc. This is one of the major advantages of this tag for managing conditional sections.
How can I learn to create professional HTML forms?
To master the creation of accessible and professional HTML forms, including optimal use of <fieldset> and many other tags, we recommend following our complete HTML course. You will learn all the best practices for creating quality web interfaces.