A <label> gives a form control an accessible name and a larger click target. There are two ways to associate them, and doing so is essential for accessibility.
Method 1: for + id (explicit)
html
Email address
A <label> gives a form control an accessible name and a larger click target. There are two ways to associate them, and doing so is essential for accessibility.
for + id (explicit)Email address
The label's for matches the input's id. This works even if they're not adjacent in the markup.
<label>
Email address
<input type="email" />
</label>
The input is nested inside the label — no id needed.
<label><input type="checkbox" /> I agree to the terms</label>
<!-- clicking the text toggles the checkbox -->
<input placeholder="Email" /> <!-- ❌ disappears on typing, poor contrast, not a label -->
A placeholder vanishes when the user types and isn't reliably announced — never use it as the only label.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
Use aria-label (or aria-labelledby) only when a visible label genuinely isn't possible.
Properly associated labels are one of the most impactful accessibility practices for forms — they give every control a name for assistive tech and enlarge click targets for everyone.
Prefer a real <label>; fall back to aria-label only when necessary, and never rely on placeholder as a label.