Labels and Input Controls
Every user-facing form control should have an accessible label. A <label> can be associated with an input through matching for and id attributes, or by wrapping the input.
Do Not Use Placeholder as a Label
Placeholder text is a hint, not a replacement for an accessible label.
Accessible Label
<label for="email">Email address</label>\n<input id="email" name="email" type="email" autocomplete="email">💡 The label's for value matches the input id, creating an explicit association.
Key Takeaways
- Associate labels with their controls.
- Do not rely on placeholder text as the only label.
Knowledge Check
Which label attribute associates a label with an input id?