HTML Fieldsets and Legends
Grouping Form Controls

HTML Fieldsets and Legends: Structuring Forms with Meaning

Forms often collect a variety of information — names, preferences, comments, agreements. To make forms more user-friendly and accessible, we can group related inputs using the <fieldset> and <legend> tags. These tags provide both structure and clarity.

What is a <fieldset>?

The <fieldset> element is used to group related form fields. It creates a visual box around those fields and tells screen readers that they belong together.

What is a <legend>?

The <legend> element is placed inside a fieldset. It acts as a caption, describing the purpose of the grouped fields.

Basic Example: Grouping Fruit Preferences

<fieldset>
  <legend>Favorite Fruits</legend>

  <input type="checkbox" id="apple" name="fruit[]" value="apple">
  <label for="apple">Apple</label><br>

  <input type="checkbox" id="banana" name="fruit[]" value="banana">
  <label for="banana">Banana</label><br>

  <input type="checkbox" id="cherry" name="fruit[]" value="cherry">
  <label for="cherry">Cherry</label>
</fieldset>

[ Favorite Fruits ]
☐ Apple  
☐ Banana  
☐ Cherry

The fieldset creates a visual grouping, and the legend acts like a label for the group.

Why Use Fieldsets and Legends?

• Clarity: Visually separate sections of a form
• Accessibility: Screen readers use the legend to describe grouped inputs
• Usability: Helps users understand which inputs are related

Example: Contact Information Section

<fieldset>
  <legend>Contact Info</legend>

  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br>

  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email">
</fieldset>

[ Contact Info ]
Name:  [             ]  
Email: [             ]

Multiple Fieldsets in a Single Form

You can use more than one fieldset to organize different parts of a longer form.

<form action="/submit" method="post">

  <fieldset>
    <legend>Fruit Selection</legend>
    <input type="radio" name="fruit" id="apple" value="apple">
    <label for="apple">Apple</label><br>
    <input type="radio" name="fruit" id="banana" value="banana">
    <label for="banana">Banana</label>
  </fieldset><br>

  <fieldset>
    <legend>Your Details</legend>
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name" required>
  </fieldset><br>

  <input type="submit" value="Submit">

</form>

[ Fruit Selection ]
◯ Apple  
◯ Banana

[ Your Details ]
Name: [           ]

[Submit]

Styling Tip

By default, fieldsets have a border and some padding. You can style them with CSS for a more modern look — but even unstyled, they add tremendous structure and accessibility value.

Best Practices

• Use <fieldset> to group related controls (like contact info or choices)
• Use <legend> to describe the purpose of each group
• Avoid nesting fieldsets unless you have a very specific reason

Summary

<fieldset> and <legend> help structure your forms logically and semantically. You’ve now learned how to:

• Group related inputs using <fieldset>
• Describe each group using <legend>
• Improve both visual structure and accessibility

What’s Next?

Ready to style your form for better UX? In the next tutorial, we’ll explore Styling Form Elements with CSS to make your HTML forms look just as polished as they work.