Grouping HTML Form Controls

Grouping HTML Form Controls

The HTML <fieldset> and <legend> elements group related form controls and provide a descriptive heading for the group.

Grouping controls can make longer forms easier to understand and provides useful context for related fields, especially groups of radio buttons and checkboxes.

The <fieldset> Element

The <fieldset> element groups related controls within a form. The controls placed inside the fieldset are treated as belonging to the same logical section.

<fieldset>
  <legend>Basic Info</legend>

  <label for="first-name">First Name:</label>
  <input type="text" id="first-name" name="first-name">

  <label for="last-name">Last Name:</label>
  <input type="text" id="last-name" name="last-name">
</fieldset>

A form can contain multiple fieldsets when its controls naturally belong to different groups.

The <legend> Element

The <legend> element provides a caption for the controls contained within a <fieldset>.

<fieldset>
  <legend>Basic Info</legend>
  ...
</fieldset>

The legend should briefly describe the purpose of the entire group rather than describe an individual form control.

Grouping Related Fields

Fieldsets are especially useful in larger forms where controls can be divided into meaningful sections such as personal information, contact information, preferences, or payment information.

<fieldset>
  <legend>Contact Information</legend>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <label for="phone">Phone:</label>
  <input type="tel" id="phone" name="phone">
</fieldset>

Logical grouping makes the structure of a form easier to understand without changing how individual controls submit their values.

Radio Button and Checkbox Groups

A fieldset and legend are particularly useful when several radio buttons or checkboxes answer a single question. The legend can describe the group while each control retains its own label.

<fieldset>
  <legend>Hobbies</legend>

  <input type="checkbox" id="cb1" name="hobby[]" value="Hunting">
  <label for="cb1">Hunting</label>

  <input type="checkbox" id="cb2" name="hobby[]" value="Gaming">
  <label for="cb2">Gaming</label>

  <input type="checkbox" id="cb3" name="hobby[]" value="Sewing">
  <label for="cb3">Sewing</label>

  <input type="checkbox" id="cb4" name="hobby[]" value="Crafts">
  <label for="cb4">Crafts</label>
</fieldset>

The legend supplies context for the entire set of choices, while the individual labels identify each checkbox.

Disabled Fieldsets

The boolean disabled attribute can be applied to a <fieldset> to disable most form controls contained within it.

<fieldset disabled>
  <legend>Account Information</legend>

  <label for="username">Username:</label>
  <input type="text" id="username" name="username">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</fieldset>

Disabled form controls generally cannot be edited or submitted with the form. This makes a disabled fieldset useful when an entire group of controls should temporarily be unavailable.

Grouping Form Controls Example

The following example uses groups from the master form. The fieldsets divide the controls into logical sections, while each legend identifies the purpose of its group.

Grouping Form Controls Best Practices

• Use <fieldset> to group controls that belong together logically.
• Give each fieldset a meaningful <legend> when the group needs a descriptive caption.
• Use a legend to describe the shared question or purpose of related radio buttons and checkboxes.
• Continue to provide individual labels for the controls inside a fieldset.
• Avoid grouping unrelated controls simply to create a visual border or layout.
• Use the disabled attribute when an entire group of controls needs to be unavailable.

Summary

The <fieldset> element groups related form controls, while the <legend> element provides a caption that describes the group. Together, they give forms meaningful structure and can improve the context provided to users and assistive technologies.

Fieldsets are especially valuable for longer forms and groups of related radio buttons or checkboxes where several individual controls belong to one question or category.