Tag legend

When designing web forms, clear structure and visual grouping help users understand the form’s layout better. The HTML <legend> tag is a powerful but often overlooked element that helps group related form controls with descriptive headings inside a <fieldset>. This not only improves form readability but also enhances accessibility.

In this article, we’ll explore what the <legend> tag is, why it matters, and how to use it effectively — complete with visual examples.

What is the <legend> Tag?

The <legend> tag defines a caption or title for the content inside a <fieldset> element. It helps group related inputs under a common heading, making long forms easier to navigate and understand.

Why Use <legend>?

  • Visual grouping: Creates a box around related form fields with a clear, descriptive title.
  • Accessibility: Screen readers announce the legend when users navigate the grouped inputs.
  • Better user experience: Users can quickly scan sections and understand the form’s structure.

Basic Structure of <fieldset> and <legend>

<fieldset>
  <legend>Personal Information</legend>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>

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

Visual Example 1: Simple Personal Info Form Section

Imagine this: a neat box containing your name and email inputs with a bold heading on top that says “Personal Information.”

Example 2: Grouping Multiple Choice Questions

<form>
  <fieldset>
    <legend>Choose Your Favorite Fruit</legend>
    <input type="radio" id="apple" name="fruit" value="apple">
    <label for="apple">Apple</label><br>
    
    <input type="radio" id="banana" name="fruit" value="banana">
    <label for="banana">Banana</label><br>
    
    <input type="radio" id="orange" name="fruit" value="orange">
    <label for="orange">Orange</label>
  </fieldset>
</form>

Here, the legend clearly labels the group of radio buttons, making the question stand out.

Visual Example 2: Radio Buttons Group with Legend

Styling <legend> and <fieldset>

The default browser styling of <fieldset> and <legend> is functional but plain. You can customize their look with CSS for a more polished design.

fieldset {
  border: 2px solid #4CAF50;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

legend {
  font-weight: bold;
  font-size: 1.2em;
  color: #4CAF50;
  padding: 0 10px;
}

Visual Example 3: Styled Fieldset and Legend

Picture a rounded green border around the group of inputs with the legend text styled in bold green above the box.

Why Accessibility Experts Recommend Using <legend>

Screen readers use the <legend> to describe the purpose of grouped inputs, making it easier for users who rely on assistive technology to understand complex forms. Without a legend, users may get confused about what a group of inputs relates to.

Summary

  • The <legend> tag provides a title for groups of form elements inside <fieldset>.
  • It improves form clarity visually and enhances accessibility.
  • You can style <legend> and <fieldset> to match your site’s look.
  • Always use <legend> when grouping related inputs to create user-friendly forms.