Form labels vs placeholders is one of the most common design questions, and the answer is short: use a label on every field, and a placeholder only as an example. Placeholders that replace labels look tidy but make forms harder to fill in and check. This guide is ideal for beginners and for teams tidying up a form’s look. We explain why, when placeholder text helps, what floating labels are, and how to hide a label without breaking accessibility in WordPress.
The short version
- A label above the field stays visible while people type.
- A placeholder disappears, so it cannot be the only instruction.
- Use placeholders for examples, such as you@yourbusiness.com.
- A hidden label must still be there for screen readers.
What is the difference between a label and a placeholder?
A label is the name of the field, shown above or beside it, and it stays put. A placeholder is grey text inside the empty field that vanishes the moment someone starts typing. Because of that, a placeholder cannot remind people what the field was for once they have begun, and it cannot help them check their answers before sending.
| Label | Placeholder | |
|---|---|---|
| Visible while typing | Yes | No |
| Read by screen readers | Yes | Not reliably |
| Contrast | Full text color | Usually light grey |
| Best use | The question | An example answer |
Why are placeholders alone a problem?
Because people forget, and because grey text is hard to read. Light grey on white often fails the 4.5 to 1 contrast ratio that body text needs, and about 8% of men and 0.5% of women have some color vision deficiency, which makes pale text harder still. The Nielsen Norman Group found placeholders in place of labels harm usability: they strain short-term memory, make errors harder to fix and are often mistaken for filled-in answers. For people using screen readers, a missing label can make a field almost impossible to identify, which is why the W3C forms tutorial asks for a label on every field.
What about floating labels?
Floating labels start inside the field like a placeholder, then shrink and move above it when people type. They save space and keep the label visible, which solves the biggest problem. They still start as light text inside the box, so contrast and clarity can suffer. We prefer a plain label above the field for most forms, because it is the clearest option for every reader.
How to set labels and placeholders well, step by step
- Give every field a label that is a short question or noun, such as Email.
- Put labels above fields for forms that run in one column.
- Add a placeholder only where an example helps, such as a date format.
- Keep help text that people need, such as We never share your email, as field help text, not a placeholder.
- Hide a label on screen only when the field’s purpose is obvious, such as a search box.
- Check the form with a screen reader, which takes about 10 minutes the first time and 2 minutes after that. The labels you set in Echo Forms are what it reads aloud.
In Echo Forms, a label can be shown or hidden on screen, and a hidden label is never removed: screen readers still read it aloud. The field options guide shows label settings, and style your form covers label position.
When is it fine to hide a label?
When the field is so familiar that the label adds nothing visible, such as a single email box in a newsletter strip with a placeholder of Your email address. Even then the label stays in the page for screen readers. Every one of our 75 templates shows its labels on screen, and a hidden label always stays in the code.
Form labels vs placeholders comes down to one rule: the label is the question, the placeholder is an example. Follow it on every form, and your forms get clearer for everyone in about 15 minutes of editing. Our form design best practices cover the rest.
Labels done right on every field
Echo Forms keeps every label for screen readers, even when you hide it on screen.
