Controls, Labels, and Grouping

What this is. A form collects input. The form element wraps it, input, textarea and select collect values, and button submits.

The piece beginners skip is the label, and it is the single most important element in the whole form.

✦ A label is not a caption

Connecting a label to its input with for and id does three things at once. A screen reader announces the label when the field receives focus. Clicking the label focuses the field, which matters enormously for small targets like checkboxes. And the browser can autofill correctly. Placeholder text does none of this, and it disappears the moment someone starts typing, so it cannot replace a label.

The connection is the whole point

ACCESSIBLE

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

BROKEN

<input type="email" placeholder="Email">

<!-- no label, no association,
     text vanishes on typing -->

Compare → The for attribute on the label must match the id on the input exactly. That string is the entire connection. Get it wrong and the label points at nothing, silently.

Input types are not cosmetic. type="email" brings up a keyboard with an at sign on a phone. type="tel" brings up a number pad. type="date" gives a date picker for free. Choosing the right type is the least work you will ever do for the biggest usability gain.

LIVE PREVIEW

loading editor…

fieldset and legend group the radio buttons, so a screen reader announces the question before reading the options.

Your turn → Click directly on the word Name rather than the box. The field focuses, because the label is properly connected. Now break the for attribute and try again.

Mark this lesson complete

Signed in, your progress follows you to every device.

Next: States, Focus, and Honest Feedback →

← Back