htmlfreecodes.
Menu

Analytics choices

Analytics is optional. If allowed, Google measures public pages, navigation, recognized acquisition sources and engagement, including tool and playground use. The site excludes entered code, search terms and form contents from its Analytics events. You can withdraw here. This choice does not change advertising consent.

Read about Analytics and your information.

<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 and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

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

Approved-page light CSS-variable defaults are supplied: --bg-primary. The snippet includes CSS inside its HTML.

<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

Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

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

Related Tags