What is the purpose of the fieldset and legend elements in forms?

The fieldset and legend elements are used to group related form controls and provide an accessible description for the group; 1. The fieldset element groups inputs semantically and visually, helping screen readers understand relationships between controls; 2. The legend element, as the first child of fieldset, acts as a labeled heading for the group, clarifying its purpose; 3. Together, they enhance accessibility, maintainability, and user experience by ensuring form sections are structured, labeled, and understandable for all users, including those using assistive technologies.

The fieldset and legend elements in HTML forms are used to group related form controls and provide an accessible description for that group. They improve both the structure and accessibility of forms, especially for users relying on screen readers or other assistive technologies.

Grouping Controls with fieldset

The fieldset element acts as a container that groups together related inputs, such as a set of radio buttons, checkboxes, or fields related to a specific section (like "Shipping Address" or "Payment Information").

Using fieldset:

• Visually draws a box around the grouped elements (by default, with a border).
• Semantically links the controls inside it.
• Helps screen readers understand that certain inputs belong together.

Describing the Group with legend

The legend element is placed inside the fieldset and provides a caption or label for the group. It’s similar to a heading for the group of inputs.

Key points about legend:

• It must be the first child of a fieldset.
• It makes the purpose of the group clear to all users, including those using screen readers.
• Without legend, a group of controls might be confusing, especially when multiple similar inputs exist.

Example: Gender Selection

<fieldset>
  <legend>Choose your gender</legend>
  <div>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label>
  </div>
  <div>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label>
  </div>
  <div>
    <input type="radio" id="other" name="gender" value="other">
    <label for="other">Other</label>
  </div>
</fieldset>

In this example:

• The fieldset groups the radio buttons.
• The legend clearly states what the group is about.
• A screen reader will announce something like “Choose your gender, group of options” before reading each radio button, giving context.

Why They Matter

• Accessibility: Screen readers use legend to describe the group, which is crucial for users who can’t see visual cues.
• Maintainability: Makes the form structure clearer in code.
• UX: Helps all users understand complex forms by breaking them into labeled sections.

Basically, fieldset and legend ensure form sections are organized and understandable — not just visually, but semantically and accessibly too.

The above is the detailed content of What is the purpose of the fieldset and legend elements in forms?. For more information, please follow other related articles on the PHP Chinese website!