foundation
Labels, names, and autocomplete
Connect labels, accessible names, descriptions, grouping, and autocomplete tokens to usable form fields.
Every form control needs an accessible name, usually from a `label`. Descriptions, error messages, `fieldset`/`legend`, `name` attributes, and `autocomplete` tokens make forms understandable, submit correctly, and work with password managers.
<fieldset>
<legend>Shipping address</legend>
<label for="street">Street <input id="street" name="street" autocomplete="street-address"></label>
</fieldset>
<p id="email-error">Enter a valid email.</p>
<input id="email" name="email" aria-invalid="true" aria-describedby="email-error">
On interviews: explicit `for`/`id` labels, implicit labels, grouping radios, and stable autocomplete values.
Common pitfalls: placeholders are not labels; missing `name` prevents submission; errors without `aria-describedby` leave screen reader users guessing.
The trade-off is minimal markup versus explicit associations — a few extra ids and legends buy reliable autofill and assistive context.
Checklist:
- Label every control.
- Group related fields with fieldset.
- Use standard autocomplete tokens.
- Associate errors with `aria-describedby`.