Form fieldset (fieldset, legend)

Form fieldset (<fieldset>) and legend (<legend>) are semantic tags in HTML used to organize form elements. They group related controls together and enhance form readability and accessibility through visual separation.

Basic Usage of <fieldset>

<fieldset> is a block-level element used to wrap a group of logically related form controls. Browsers typically add a border to <fieldset> by default, creating a visual grouping effect. For example:

<fieldset>
  <legend>User Information</legend>
  <label>Name: <input type="text" name="username"></label>
  <label>Email: <input type="email" name="email"></label>
</fieldset>

This example creates a fieldset containing two input fields, automatically wrapped by a border.

Role of <legend>

<legend> must appear as the first child of <fieldset> and is used to describe the purpose of the fieldset. Its text is embedded into the border line of <fieldset>:

<fieldset>
  <legend>Payment Method</legend>
  <label><input type="radio" name="payment" value="credit"> Credit Card</label>
  <label><input type="radio" name="payment" value="paypal"> PayPal</label>
</fieldset>

Styling Customization Example

While browsers provide default styling, you can fully customize the appearance with CSS:

fieldset {
  border: 2px dashed #ccc;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 1em;
}

legend {
  color: #ff6b6b;
  font-weight: bold;
  padding: 0 10px;
  background: white;
}

Complex Form Grouping Practice

In multi-step forms, fieldsets can clearly divide different sections:

<form>
  <fieldset>
    <legend>Basic Information</legend>
    <!-- Name, phone, etc. -->
  </fieldset>
  
  <fieldset>
    <legend>Shipping Address</legend>
    <!-- Address-related fields -->
  </fieldset>
  
  <fieldset disabled>
    <legend>Order Confirmation</legend>
    <!-- Read-only order summary -->
  </fieldset>
</form>

Disabling an Entire Fieldset

Use the disabled attribute to disable all controls within a group at once:

<fieldset disabled>
  <legend>Member Information (Non-members cannot edit)</legend>
  <label>Member ID: <input type="text" name="vip_id"></label>
  <label>Points: <input type="number" name="points"></label>
</fieldset>

Accessibility Considerations

Screen readers announce <legend> content as context for controls within the group. Ensure:

• Every <fieldset> has a corresponding <legend>
• Description text should be concise and clear
• Avoid nesting fieldsets more than 3 levels deep

Integration with ARIA

For more complex scenarios, combine with ARIA attributes to enhance semantics:

<fieldset aria-describedby="hint">
  <legend>Emergency Contact</legend>
  <p id="hint">At least one emergency contact is required</p>
  <!-- Contact fields -->
</fieldset>

Practical Use Case

E-commerce site filters often use fieldsets:

<aside>
  <fieldset>
    <legend>Price Range</legend>
    <input type="range" min="0" max="1000">
  </fieldset>
  
  <fieldset>
    <legend>Product Categories</legend>
    <label><input type="checkbox" name="category" value="1"> Electronics</label>
    <label><input type="checkbox" name="category" value="2"> Home Goods</label>
  </fieldset>
</aside>

Browser Compatibility Details

All modern browsers fully support these elements, but note:

• IE11 has issues with certain CSS styles (e.g., display: grid) inside <fieldset>
• Mobile browsers may ignore some border styles
• Borders may display inconsistently when printing

Form Submission Behavior

The fieldset itself does not affect form data submission; it is purely for visual and semantic grouping. Only valid form controls within the group will be included in the submitted data.

Nested Fieldsets Usage

While nesting is possible, it's recommended to limit it to two levels:

<fieldset>
  <legend>Primary Information</legend>
  
  <fieldset>
    <legend>Secondary Information</legend>
    <!-- Nested fields -->
  </fieldset>
</fieldset>