Labels, Fieldsets, and Legends

8 min read

Grouping and Labelling Form Controls

A <label> links a text description to a form control. When the label is clicked, the associated input receives focus. This is critical for accessibility — screen readers read the label when the input is focused.

html

<!-- Explicit label (recommended) -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" />

<!-- Implicit label (input nested inside label) -->
<label>
  Username
  <input type="text" name="username" />
</label>

<!-- Fieldset groups related controls -->
<fieldset>
  <legend>Delivery Address</legend>

  <label for="street">Street</label>
  <input type="text" id="street" name="street" />

  <label for="city">City</label>
  <input type="text" id="city" name="city" />

  <label for="postcode">Postcode</label>
  <input type="text" id="postcode" name="postcode" />
</fieldset>

Never use placeholder text as a replacement for a <label>. Placeholders disappear when the user starts typing, leaving them with no reminder of what the field expects.

Ready to test yourself?

Practice HTML— quiz & coding exercises