HTML <legend> Element

The <legend> element is used to provide a caption or title for a <fieldset> element, which groups related form controls together. It helps improve accessibility and usability by giving context to the grouped form elements.

Basic Syntax

Here's how the basic structure looks:

Key Features

Must be the first child of a <fieldset> element
Improves form accessibility for screen readers
Helps visually group related form controls
Can be styled with CSS like any other text element

Examples

Example 1: Basic Form Grouping

A simple contact information form section:

Play Code

<fieldset>
  <legend>Contact Information</legend>
  <label>Name: <input type="text"></label><br>
  <label>Email: <input type="email"></label><br>
  <label>Phone: <input type="tel"></label>
</fieldset>

Example 2: Styled Legend

Showing how CSS can be applied to customize the legend appearance:

Play Code

<fieldset style="border: 2px solid #4CAF50; padding: 10px;">
  <legend style="color: #4CAF50; font-size: 1.2em; padding: 0 10px;">Shipping Address</legend>
  <label>Street: <input type="text"></label><br>
  <label>City: <input type="text"></label><br>
  <label>ZIP: <input type="text"></label>
</fieldset>

Example 3: Multiple Fieldset Groups

Demonstrating how to use multiple legends in a complex form:

Play Code

<form>
  <fieldset>
    <legend>Personal Details</legend>
    <label>First Name: <input type="text"></label><br>
    <label>Last Name: <input type="text"></label>
  </fieldset>
  
  <fieldset>
    <legend>Account Settings</legend>
    <label>Username: <input type="text"></label><br>
    <label>Password: <input type="password"></label>
  </fieldset>
</form>

Example 4: Dynamic Legend with JavaScript

Changing the legend text based on user selection:

Play Code

<fieldset>
  <legend id="paymentLegend">Payment Method</legend>
  <select onchange="document.getElementById('paymentLegend').textContent = 'Payment: ' + this.value">
    <option value="Credit Card">Credit Card</option>
    <option value="PayPal">PayPal</option>
    <option value="Bank Transfer">Bank Transfer</option>
  </select>
</fieldset>

Example 5: Toggle Fieldset with JavaScript

Showing/hiding a fieldset and updating the legend accordingly:

Play Code

<fieldset id="optionalFields">
  <legend onclick="toggleFields()">▼ Additional Options (Click to show)</legend>
  <div id="optionalContent" style="display:none">
    <label>Newsletter: <input type="checkbox"></label><br>
    <label>Promotions: <input type="checkbox"></label>
  </div>
</fieldset>

<script>
function toggleFields() {
  const content = document.getElementById('optionalContent');
  const legend = document.querySelector('#optionalFields legend');
  if (content.style.display === 'none') {
    content.style.display = 'block';
    legend.textContent = '▲ Additional Options (Click to hide)';
  } else {
    content.style.display = 'none';
    legend.textContent = '▼ Additional Options (Click to show)';
  }
}
</script>

Tips and Tricks

Accessibility: Always use <legend> with <fieldset> to help screen readers understand form structure.
Styling: You can position the legend text anywhere on the fieldset border using CSS positioning.
Responsive Design: Keep legend text concise as it may not wrap well on small screens.
Visual Hierarchy: Use larger or bold text for legends to clearly distinguish different form sections.
Dynamic Content: As shown in examples, you can modify legends with JavaScript to provide interactive feedback.