Labels Versus Placeholders

The cleanest-looking form hides its own instructions

There's a form design that wins every internal review: no labels, just light gray prompts sitting inside each empty field. It looks calm, modern, and shorter than the alternative. The trouble is that the review happens on an empty form, and nobody fills in an empty form. The visitor does the one thing the form exists for — they type — and the instruction they were relying on disappears under their own answer.

That's the whole dispute in one sentence. A label sits outside the field and stays put. A placeholder sits inside the field and deletes itself the moment someone acts on it. Everything else about this decision follows from which of those two behaviors you can afford.

What actually goes missing when the placeholder goes

On a three-field contact form, not much — most people can hold name, email, message in their head. But forms for the organizations we work with are rarely three fields. Registration forms, grant inquiries, visa and consular questions, membership renewals: a dozen fields, some of them look-alikes. Once every field is full, a placeholder-only form is a page of anonymous boxes. The visitor who wants to double-check their answers before submitting has nothing to check them against.

Interruptions make it worse. Someone starts the form, takes a phone call, and comes back to a screen that no longer explains itself. Was that second box a work phone or a mobile? The only way to find out is to delete what they typed and watch what reappears — which is a genuinely absurd thing to ask of a person, and yet it's the actual recovery path this design leaves them.

Autofill breaks it too, and autofill is how a large share of real visitors complete forms now. The browser pours saved values into every field at once, and the visitor's job shifts from typing to verifying. On a labeled form, verifying takes a glance. On a placeholder-only form, every filled field has covered its own name.

What a screen reader hears

For anyone using a screen reader, the difference stops being an inconvenience and becomes a wall. A properly associated label is announced when the field receives focus: the visitor hears what's being asked, then answers. Placeholder text has no such guarantee — support is inconsistent across screen readers, and a placeholder was never designed to be a field's name in the first place. A form that relies on placeholders alone is gambling that every visitor's assistive technology will paper over a hole in the markup.

For government bodies and public institutions this isn't a taste question. Accessibility standards that public-sector sites are held to expect form inputs to have proper labels, and an unlabeled input is one of the most common failures automated audits flag. The visible label and the announced label should be the same thing, associated with the field in the markup — that way the fix for usability and the fix for compliance are one fix, not two.

There's a quieter accessibility cost as well: placeholder text is conventionally rendered in low-contrast gray, precisely so it doesn't look like an answer. Text that's deliberately faint is a strange place to keep the only copy of your instructions.

What placeholders are actually for

None of this makes the placeholder useless. It's good at exactly one job: showing what a correct answer looks like. A label says 'Phone number'; a placeholder says '(555) 012-3456'. The label carries the question, the placeholder demonstrates the format, and when the demonstration disappears under real typing, nothing is lost — the visitor no longer needs the example, and the label is still there.

Floating labels — the pattern where the placeholder slides up and shrinks into a label position when typing starts — are a reasonable compromise when vertical space is genuinely scarce. But they're a compromise that has to be built carefully: the floated text still needs real contrast, the markup still needs a real label, and the animation buys you a line of height at the cost of some fragility. Most forms aren't so cramped that a plain visible label wouldn't have been simpler.

The trade you're actually making

Keeping labels visible costs a little vertical space and a little visual quiet. Hiding them costs comprehension for everyone, recovery for anyone interrupted, verification for everyone who autofills, and access for people using screen readers. Framed that way, it's not much of a decision — the empty-form aesthetic is the only thing on the other side of the scale, and nobody ever contacted your organization because the form looked nice while it was empty.

That's the pattern this series keeps returning to: the small choices that read as style questions are usually operational questions wearing a costume. Next up in the series — what should happen in the seconds after someone presses submit, and why 'the page didn't reload' is not the same thing as 'it worked.'