Placeholder vs label — which to use in a form (and why grey text inside loses submissions)

A four-field form with no labels looks tidy: grey text inside the inputs, nothing extra. That's how most templates draw it — and that's exactly what an AI will generate for you unless you say otherwise.

Now the surprising part. Eyetracking shows that people's eyes are drawn to empty fields. A field that already has something in it — even pale grey — gets skipped by the eye. Best case, that costs a few seconds. Worst case, the field is never noticed and the form is abandoned half-filled.

Let's compare them honestly.

What these two things actually are

A label is text outside the field: "Phone". It's visible at all times.

A placeholder is grey text inside an empty field: "+1 555 123-4567". It disappears the moment someone starts typing.

The HTML spec is blunt about it: the placeholder attribute should not be used as an alternative to a label. It also spells out the difference in meaning: a label's hint is shown at all times; the placeholder's hint only before a value is entered; and a title hint only when the user asks for further help.

The six criteria where they diverge

1. Visible while typing. Label: yes, it sits outside. Placeholder: no, it vanishes under the first character. On a long form that's a direct memory tax — people forget which field this is and delete what they typed just to peek at the hint again.

2. You can check the form before submitting. With labels you scan top to bottom and confirm everything landed right. Without them there's nothing to check: values with no names. It hurts most when the browser autofilled something into the wrong box.

3. You can fix an error. The form comes back with an error — and the instruction about what was expected evaporated along with the placeholder. Now you have to clear the field to see it again.

4. It works for keyboard users. Someone tabbing through fields doesn't stop to study the next one. They see a label; they don't see a disappearing placeholder.

5. The field is noticeable. This is the big loss: a field that looks filled gets lost. Worse, grey text is often read as a value that's already there — so the field is skipped on purpose.

6. Accessibility. Placeholders default to light grey, which fails contrast for anyone with low vision. And not every screen reader announces them: some people simply never get the hint.

The one place a placeholder wins is screen space. A label takes a line; a placeholder doesn't. On narrow mobile screens that's a real argument, not a nitpick — especially if you're already tuning your site for phones.

Floating labels are a fair compromise

There's a middle option: the label sits inside the field and floats up on focus, staying visible (the floating label). It fixes the first four problems: the text is visible while typing, the form can be reviewed, errors can be fixed, and tabbing reads fine.

Two problems remain: the field still looks filled, and the accessibility concerns don't disappear. So it's a compromise for tight screens, not the best option overall.

The verdict — who should use what

• Any form with more than one field — a label outside, always visible. That's the default; there's nothing to argue about.
• A placeholder — only in addition to a label, and only as a format example: "+1 555 123-4567", "dd/mm/yyyy". Never as a replacement.
• A floating label — when the screen really is tight and an extra line breaks the layout.
• A search box in a header — the one case where a lone placeholder is acceptable: single field, an icon next to it, obvious job. A label for screen readers is still required; it's just hidden visually.

One consequence if you assemble forms with AI: the generated markup almost always ships without label. A single line in the prompt — "every field gets a visible label outside it; placeholders only as format examples" — closes the issue. More rules like that in how to rewrite UI text with AI.

What if a designer insists on a "clean" label-free form?

The counterargument isn't aesthetics, it's submissions. Ask which matters more: one line less on the mockup, or a share of the forms never sent. And offer floating labels — visually it's nearly the same thing.

Can I keep the placeholder as a format example?

Yes, that's its real job. The label answers "what goes here", the placeholder answers "in what format". Just don't hide requirements like "minimum 8 characters" in it — those must stay on screen permanently. For the wording, see microcopy.

What about longer hints?

Put a long hint under the field as plain text. A placeholder won't hold it, and a hover tooltip won't fire on a phone — there's no hover there. To assemble the form itself step by step, use the contact form guide.