Labels That Disappear When You Type

What placeholders were for

A hint about the expected format, shown inside an empty field.

Something in the shape of a date, an example of a postcode, or a note that a phone number should include the area code.

They were never intended to replace the label, and using them that way became common because it produces a visually tidier form.

Which is a real aesthetic gain and it costs more than it is worth.

The four failures

• It disappears when typing, so nobody can check what the field was.
• Low contrast by default, since placeholder text is rendered grey.
• Screen readers vary in whether they announce it.
• It looks like content, so people think the field is already filled.

The first is the one everybody has experienced. Halfway through a form you cannot remember whether a box wanted a name or a company, and the only way to check is to delete what you typed.

The fourth causes real abandonment, because a form that appears complete produces confusion when it will not submit.

Who this affects most

Anybody who cannot hold the whole form in working memory at once.

Which includes people with cognitive or memory difficulties, anybody distracted, anybody returning to a half-completed form, and anybody filling it in while doing something else.

It also affects anybody using a screen reader, where behaviour is inconsistent and a field may be announced as simply an edit box.

And anybody with a translation tool, since placeholder text is handled differently and sometimes not translated at all.

The general point is that it fails hardest for the people already finding forms difficult.

What a proper label does

Several things at once, which is why it is the correct answer.

It stays visible while typing, so the field can be checked at any point.

It is announced reliably by assistive technology, because that is what labels are for.

It extends the tap target, since tapping a correctly associated label focuses its field.

And it can carry additional guidance beneath it without cluttering the field itself.

A label above the field, at ordinary text contrast, is the arrangement that works for the widest range of people.

A worked example

A quote form with six fields, all using placeholders and no labels.

Abandonment was high and the business assumed the form was simply too long.

Testing it, the specific problem was two fields that both accepted text and became indistinguishable once anything was typed into them.

People were reaching the end, being unsure which was which, and giving up rather than clearing both to check.

Adding visible labels above every field, keeping the placeholders as format hints where useful, raised completion noticeably.

The form was exactly as long as before. It had simply become possible to complete without remembering the order of the boxes.

Floating labels

The popular compromise, and worth assessing honestly.

The label starts inside the field and moves above it when typing begins, which preserves the tidy appearance and keeps the label visible.

Done properly it addresses the main failure, and it introduces its own problems.

The moved label is usually rendered very small, at reduced contrast, which trades one legibility problem for another.

The animation can be disorienting, and implementations vary in whether they work correctly with assistive technology and with autofill.

For a small business form, a plain label above the field is more reliable and no worse in any way that matters.

The counter-case

Where a placeholder alone is defensible.

A single-field form whose purpose is unmistakable from context, such as a search box marked with a magnifying glass, where a visible label would be redundant.

Even there, a label should exist in the code for assistive technology, hidden visually rather than absent.

What is not a counter-case is a form of two or three fields, where the same confusion arises with fewer boxes.

The threshold is not the length of the form. It is whether each field remains identifiable once something has been typed into it.

Autofill, which labels make work

A practical benefit that has nothing to do with accessibility and follows from the same fix.

Browsers and phones can fill in name, address, email and phone automatically, which removes most of the effort of a form.

That only works when fields are correctly labelled and marked with what they contain, so the browser can recognise them.

A form built from unlabelled boxes with placeholder hints frequently cannot be autofilled at all, which means every visitor types everything.

On a phone, where typing is slowest, that difference is large enough to affect completion rates on its own.

Which is the recurring pattern throughout this whole subject: the accessible version turns out to be the faster one for everybody.

Error messages and required fields

Two related items that belong with labels.

Mark required fields in words rather than only with an asterisk, or state at the top that all fields are required, which is simpler and frequently true.

Put error messages next to the field they concern, in words, saying what is wrong and what would be correct.

Do not clear the form when validation fails, which is infuriating and somehow still happens regularly.

And do not validate a field before somebody has finished typing in it, which produces an error message while they are mid-way through entering something perfectly valid.

Grouping related fields

A smaller point that helps longer forms considerably.

Fields belonging together, such as an address or a set of radio options, should be grouped with a heading describing the group.

Without it, a screen reader announces each radio option individually with no indication of what the choice is about.

Which produces an experience of being asked to choose between three unlabelled options for an unstated question.

The same grouping helps sighted readers scan a long form quickly, which is the recurring pattern throughout this entire subject.

1. Fill in your own form halfway and see whether every field is still identifiable.
2. Check labels are above the fields, not inside them.
3. Tap a label and see whether it focuses the field.
4. Submit it wrong and read the errors.
5. Check nothing is cleared when it fails.
6. Check required fields are marked in words.

The first takes about thirty seconds and is the single test that reveals the problem this whole subject is about.

How much the form should ask for at all is covered in asking for a phone number you will not use.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.