HTML <legend> Tag

The <legend> tag defines a caption for the content of a <fieldset> element. It provides a clear heading or title for the grouped form controls within the fieldset, which is crucial for accessibility and improves the user's understanding of the form's structure.

Syntax

<legend align="left|center|right|justify|char"  dir="ltr|rtl"  accesskey="character"  class="classname"  contenteditable="true|false" contextmenu="menuid"  data-*="value"  draggable="true|false|auto"  dropzone="copy|move|link"  hidden="hidden"  id="id"  lang="language_code"  spellcheck="true|false" style="style_definitions" tabindex="number" title="tooltip_text">
    Legend content
</legend>

Attributes

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"><br><br>
  </fieldset>
  <button type="submit">Submit</button>
</form>

More Examples

Example 1: Using Multiple Fieldsets

<form>
  <fieldset>
    <legend>Contact Information</legend>
      <label for="phone">Phone:</label>
      <input type="tel" id="phone" name="phone"><br><br>
      <label for="address">Address:</label>
      <textarea id="address" name="address"></textarea><br><br>
  </fieldset>

  <fieldset>
      <legend>Preferences</legend>
      <label for="newsletter">Subscribe to newsletter:</label>
      <input type="checkbox" id="newsletter" name="newsletter"><br><br>
      <label for="updates">Receive updates:</label>
      <input type="checkbox" id="updates" name="updates"><br><br>
  </fieldset>
   <button type="submit">Submit</button>
</form>

This example demonstrates the use of multiple fieldsets, each with its own legend, to logically group related form elements.

Example 2: Styling the Legend

<form>
  <fieldset>
    <legend style="font-weight: bold; color: darkblue; padding: 5px;">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"><br><br>
  </fieldset>
  <button type="submit">Create Account</button>
</form>

This example uses inline CSS to style the legend, illustrating how to enhance its visual presentation. However, external stylesheets or classes are preferred for larger applications.

Example 3: Accessibility Example

<form>
  <fieldset aria-describedby="fieldset-info">
    <legend>Shipping Address</legend>
        <label for="shipping-name">Name:</label>
        <input type="text" id="shipping-name" name="shipping-name" required><br><br>
        <label for="shipping-street">Street:</label>
        <input type="text" id="shipping-street" name="shipping-street" required><br><br>
    <p id="fieldset-info" style="display: none;">All fields in this section are required.</p>
  </fieldset>
  <button type="submit">Submit</button>
</form>

This example shows how aria-describedby can be used with a fieldset and the hidden information is passed with a message to assistive technologies when the fieldset is focused. This is another important concept to improve accessibility.

Browser Support

The <legend> tag is supported by all modern browsers:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Notes and Tips

• Always use the <legend> tag within a <fieldset> element for proper semantic structure and accessibility.
• Use clear and descriptive text for the legend to indicate the purpose of the grouped controls.
• Avoid using deprecated attributes like align. Use CSS for styling instead.
• Consider adding ARIA attributes to improve accessibility, such as aria-describedby to provide additional instructions.
• When styling legends, ensure that the styling does not obscure or conflict with the form controls themselves.
• Use tabindex and accesskey to enhance the usability of your form for keyboard users, but remember to test the tab order logically.
• Keep your fieldsets and their legends as intuitive as possible; overly complex forms can confuse or frustrate users.
• For complex forms, consider using headings along with fieldsets and legends to clearly organize different sections of the form.