Form Labels
Definition
Text that identifies form fields, telling users what information to enter. Essential for accessibility and usability.
What are Form Labels?
Form labels are the text that identifies what information a form field requires. They tell users (and assistive technologies) what to enter in each input – "Email address," "Phone number," "Delivery notes."
Properly coded labels are associated with their inputs, allowing screen readers to announce them and enabling click-to-focus functionality.
Why Form Labels Matter
Screen Reader Accessibility
Without labels, screen reader users hear only "edit text" or "input blank" with no indication of what to enter.
Click Target
Properly associated labels expand the clickable area. Clicking the label focuses the input – helpful for small checkboxes and radio buttons.
WCAG Requirement
Labels for form inputs are a Level A requirement. Missing labels is a fundamental accessibility failure.
Usability
Clear labels reduce errors and confusion for all users.
Implementing Form Labels
Standard Label
<label for="email">Email address</label>
<input type="email" id="email" name="email">
The for attribute matches the input's id, creating the association.
Wrapped Label
<label>
Email address
<input type="email" name="email">
</label>
When the input is inside the label, no for attribute is needed.
Placeholder Text is Not a Label
Placeholders disappear when users start typing, leaving no visible label. They should supplement labels, not replace them.
Wrong
<input type="email" placeholder="Email address">
Right
<label for="email">Email address</label>
<input type="email" id="email" placeholder="e.g., name@example.com">
Labels for Different Input Types
Text Inputs
Standard visible labels work best.
Checkboxes and Radio Buttons
Label should describe what selecting this option means.
<input type="checkbox" id="newsletter">
<label for="newsletter">Subscribe to monthly newsletter</label>
Groups of Inputs
Use <fieldset> and <legend> to group related inputs:
<fieldset>
<legend>Preferred contact method</legend>
<input type="radio" id="phone" name="contact">
<label for="phone">Phone</label>
<input type="radio" id="email" name="contact">
<label for="email">Email</label>
</fieldset>
Label Best Practices
Be Clear and Specific
"Name" could mean anything. "Full name as it appears on your card" is clear.
Position Consistently
Labels typically appear above or to the left of inputs, and to the right of checkboxes/radio buttons.
Don't Hide Labels
Visually hidden labels still need to exist in the code for screen readers.
Include Format Requirements
If specific format is needed, include it: "Phone number (e.g., 07000 000000)"