← Back to All Tags

<legend>

Defines a caption for a <fieldset> element

Definition and Usage

The <legend> element establishes a caption for the <fieldset> element.

The <legend> element must be the first child of a <fieldset> element and provides an accessible name for the group of form controls.

Tip: The <legend> tag is particularly important for accessibility, as screen readers use it to identify groups of related form controls.
Note: Always use <legend> as the first child of <fieldset> for proper semantic structure.

Browser Support

The <legend> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

The <legend> tag supports the Global Attributes in HTML.

The <legend> tag also supports the Event Attributes in HTML.

Examples

Basic Fieldset with Legend

Create a simple form group with a caption:

Example

<form>
  <fieldset>
    <legend>Personal Information</legend>

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

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

Styled Legend

Apply custom styles to the legend element:

Example

<style>
  legend {
    background-color: #745af2;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 16px;
  }

  fieldset {
    border: 2px solid #745af2;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
  }
</style>

<form>
  <fieldset>
    <legend>Shipping Address</legend>

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

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

    <label for="zip">ZIP Code:</label>
    <input type="text" id="zip" name="zip">
  </fieldset>
</form>

Form with Multiple Fieldsets

Organize a complex form with multiple grouped sections:

Example

<form>
  <fieldset>
    <legend>Account Details</legend>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username"><br><br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
  </fieldset>

  <fieldset>
    <legend>Contact Information</legend>
    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone"><br><br>
    <label for="email2">Email:</label>
    <input type="email" id="email2" name="email2">
  </fieldset>

  <fieldset>
    <legend>Preferences</legend>
    <input type="checkbox" id="newsletter" name="newsletter">
    <label for="newsletter">Subscribe to newsletter</label><br>
    <input type="checkbox" id="notifications" name="notifications">
    <label for="notifications">Enable notifications</label>
  </fieldset>

  <button type="submit">Submit</button>
</form>

Accessibility-Enhanced Legend

Use legend for improved accessibility with radio button groups:

Example

<form>
  <fieldset>
    <legend>Choose your preferred payment method:</legend>

    <input type="radio" id="credit" name="payment" value="credit">
    <label for="credit">Credit Card</label><br>

    <input type="radio" id="debit" name="payment" value="debit">
    <label for="debit">Debit Card</label><br>

    <input type="radio" id="paypal" name="payment" value="paypal">
    <label for="paypal">PayPal</label><br>

    <input type="radio" id="cash" name="payment" value="cash">
    <label for="cash">Cash on Delivery</label>
  </fieldset>
</form>

Positioned Legend

Create a floating legend with CSS positioning:

Example

<style>
  .custom-fieldset {
    position: relative;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 30px 20px 20px;
    margin: 30px 0;
  }

  .custom-legend {
    position: absolute;
    top: -15px;
    left: 20px;
    background-color: var(--bg-primary);
    padding: 0 10px;
    font-weight: 700;
    color: #745af2;
    font-size: 18px;
  }
</style>

<form>
  <fieldset class="custom-fieldset">
    <legend class="custom-legend">Login Credentials</legend>

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

    <label for="pass">Password:</label>
    <input type="password" id="pass" name="pass">
  </fieldset>
</form>

Try it Yourself

Interactive Example

Here's a live example of a form with fieldset and legend:

Personal Details

Accessibility Importance

The <legend> element is crucial for web accessibility:

  • Screen Readers: Screen readers announce the legend text when users navigate to any control within the fieldset
  • Form Context: Provides context for related form controls, especially important for radio buttons and checkboxes
  • WCAG Compliance: Helps meet WCAG accessibility standards for grouping related form controls
  • Keyboard Navigation: Improves navigation experience for keyboard-only users
  • Cognitive Support: Helps users with cognitive disabilities understand form structure
Accessibility Tip: Always include a <legend> when using <fieldset> to ensure all users can understand the purpose of grouped form controls.

Best Practices

  • Always use <legend> as the first child of <fieldset>
  • Keep legend text concise and descriptive
  • Use <legend> for radio button and checkbox groups
  • Don't nest <legend> elements inside each other
  • Only use one <legend> per <fieldset>
  • Make legend text meaningful - it should clearly describe the group's purpose
  • Style legends consistently across your forms for better user experience
  • Use legends to improve form structure and organization

Default CSS Settings

Most browsers will display the <legend> element with the following default values:

Default CSS

legend {
  display: block;
  padding-left: 2px;
  padding-right: 2px;
  border: none;
}

Related Tags