HTML Labels and Fieldsets: Making Forms Understandable

A label tells people what a field is for. It is one of the most important accessibility features in HTML.

Connecting a label to a field

Use for on the label with the id of the field:

1
2

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

Or wrap the field inside the label:

1

<label>Email address <input type="email" name="email"></label>

Why labels matter

• Clicking the label focuses the field, which gives a bigger target on phones.
• Screen readers announce the label when the field gets focus.
• Checkboxes and radios become easy to tap.

Grouping with fieldset and legend

fieldset groups related controls. legend is its caption. They are especially important for radio buttons and checkboxes, where each option has its own label but the group needs one too.

1
2
3
4
5
6
7

<form>
  <fieldset>
    <legend>Delivery details</legend>
    <p><label>Street <input type="text" name="street"></label></p>
    <p><label>Town <input type="text" name="town"></label></p>
  </fieldset>
</form>

1
2

<label for="nickname">Nickname</label>
<input type="text" id="nickname" name="nickname">