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`.