🌱BeginnerForms
Fieldset and Legend
Group related form controls with <fieldset> and label the group with <legend>.
Overview
The <fieldset> element groups related form controls together, and <legend> provides a caption for that group. Together they help users understand which fields are related and make the form more accessible to screen reader users.
Browsers render <fieldset> with a visible border box and <legend> text embedded in the top border but this can be completely restyled with CSS.
Fieldsets are especially important for radio button groups and checkbox groups, where the individual labels name the option but the group needs an overall label (like "Preferred language" for a set of language radio buttons).
Key Points
- •<fieldset> groups related inputs; <legend> is the visible label for the group
- •<legend> must be the first child of <fieldset>
- •Screen readers announce the legend when entering the fieldset
- •disabled on <fieldset> disables all controls inside it at once
- •Multiple fieldsets in a form create logical sections (personal info, billing info, etc.)
- •CSS can completely restyle the default border appearance
Examples
A radio group with fieldset and legend
<fieldset>
<legend>Preferred contact method</legend>
<input type="radio" id="contact-email" name="contact" value="email">
<label for="contact-email">Email</label>
<input type="radio" id="contact-phone" name="contact" value="phone">
<label for="contact-phone">Phone</label>
<input type="radio" id="contact-sms" name="contact" value="sms">
<label for="contact-sms">SMS</label>
</fieldset>Multiple fieldsets for form sections
<form action="/register" method="POST">
<fieldset>
<legend>Personal Information</legend>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname">
</fieldset>
<fieldset>
<legend>Account Details</legend>
<label for="email">Email</label>
<input type="email" id="email" name="email">
<label for="password">Password</label>
<input type="password" id="password" name="password">
</fieldset>
<button type="submit">Register</button>
</form>Disabled fieldset disables all contained inputs
<fieldset disabled>
<legend>Billing (same as shipping locked)</legend>
<input type="text" name="billing-name" value="Jane Doe">
<input type="text" name="billing-address" value="123 Main St">
</fieldset>A disabled fieldset greys out all its inputs and prevents submission of those fields.
Common Mistakes
- Placing <legend> anywhere other than the first child of <fieldset>
- Using <fieldset> purely for visual grouping without the semantic meaning
- Forgetting that screen readers read the legend before each input in the group
Note
Think of fieldset + legend as the form equivalent of section + h2 in page structure. Both group related content and provide a title for that group.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4