Form Labels: Make Every Input Understandable

Inputs without labels force users to guess or rely on placeholder text that disappears.

Accessible forms start with explicit naming.

What It Is

A form label associates visible or programmatic text with a control so users and assistive technologies know what the field is for.

<label for="email">Work email</label>
<input id="email" name="email" type="email">

Why It Matters

• Screen readers rely on labels to announce fields properly.
• Visible labels improve completion speed and confidence.
• They reduce ambiguity in signup, checkout, and contact flows.

Best Practices

1. Pair each visible input with a real label or accessible name.
2. Use placeholders as hints, not replacements for labels.
3. Keep label wording specific and user-facing.

Common Mistakes

• No label, only placeholder text.
• Using icons alone as field names.
• Mismatching for and id values.

Quick Checklist

• Every visible input has a label or accessible name.
• Label text is clear.
• Associations work correctly.

Final Takeaway

If a user cannot identify an input instantly, the form is already harder than it should be.