Blog · Getting forms right
Labels Versus Placeholders
Forms that put the instructions inside the fields look clean in a mockup and cause problems as soon as people use them. Here is why labels need to stay visible, what placeholders are good for, and what a screen reader user hears when the label is missing.
The cleanest-looking form hides its own instructions
One form design wins every internal review: no labels, just light gray prompts inside each empty field. It looks calm and modern, and shorter than the alternative. But the review happens on an empty form, and nobody fills in an empty form. As soon as a visitor starts typing, the instruction they were relying on disappears under their answer.
A label sits outside the field and stays put. A placeholder sits inside the field and disappears once someone types. Everything else in this post follows from that difference.
What visitors lose when the placeholder disappears
On a three-field contact form, not much. Most people can keep name, email, and 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 easy to confuse. Once every field is filled in, a placeholder-only form is a page of unlabeled boxes. A visitor who wants to 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 says what anything is. Was that second box for a work phone or a mobile? The only way to find out is to delete what they typed and see what reappears. That's an absurd thing to ask of anyone, and it's the only way back this design gives them.
Autofill breaks it too, and a large share of real visitors now complete forms with autofill. The browser fills every field at once, and the visitor's job shifts from typing to checking. On a labeled form, checking takes a glance. On a placeholder-only form, every filled field has covered up its own name.
What a screen reader hears
For someone using a screen reader, this goes from an inconvenience to a barrier. A properly associated label is announced when the field gets focus, so the visitor hears the question and then answers. Placeholder text has no such guarantee. Support varies across screen readers, and a placeholder was never meant to be a field's name. A form that relies on placeholders alone is betting that every visitor's assistive technology will make up for a gap in the markup.
For government bodies and public institutions this isn't a matter of taste. The accessibility standards public-sector sites are held to expect form fields to have proper labels, and an unlabeled field is one of the most common failures automated audits flag. Make the visible label and the announced label the same thing, tied to the field in the markup. Then one fix covers both usability and compliance.
Placeholders have a smaller accessibility cost too. By convention they're light gray and low contrast, so they don't look like an answer. Faint text is a poor place to keep the only copy of your instructions.
What placeholders are good for
Placeholders still have a use: showing what a correct answer looks like. The label says 'Phone number' and the placeholder says '(555) 012-3456'. The label asks the question and the placeholder shows the format. When the example disappears as the visitor types, nothing is lost, because they no longer need it and the label is still there.
Floating labels, where the placeholder slides up and shrinks into a label once typing starts, are a reasonable compromise when vertical space is genuinely tight. They have to be built carefully, though. The floated text still needs real contrast, the markup still needs a real label, and the animation saves one line of height at the cost of some fragility. Most forms have room for a plain visible label, which is simpler.
What each choice costs
Visible labels take a little vertical space and make the form look a little busier. Hiding them makes the form harder for everyone to understand, harder to pick up again after an interruption, harder to check after autofill, and harder or impossible to use with a screen reader. The only thing on the other side is how the form looks while it's empty, and nobody ever contacted your organization because the empty form looked nice.
This series keeps coming back to the same point: small choices that look like style questions usually turn out to be operational ones. Next in the series: what should happen in the seconds after someone presses submit, and why 'the page didn't reload' does not mean 'it worked.'