HTML Fieldset and Legend

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.

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.

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

<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.

• 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

<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: [             ]

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]

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.

• 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

<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

Choose the option that lists all and only the correct statements.

1. Grouping student personal information
2. Labeling grouped input fields with <legend>
3. Styling text input fields with <legend>
4. Separating parent/guardian details from student data

Choose the option that lists all and only the correct statements.

1. <fieldset><legend>Guardian Details</legend><input name="parent_name"></fieldset>

2. <fieldset><legend>Address</legend><textarea></textarea></fieldset>

3. <legend>Exam Choices</legend><fieldset><input name="subject"></fieldset>

4. <fieldset legend="Academic Info">...</fieldset>

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.