Protocol
Keep the field’s identity after the user starts typing
A field should not lose its name when it receives an answer.
When it fits
- A form looks clean until its placeholder disappears.
When to avoid it
- Some controls have context-specific labelling patterns. A technical label association alone does not make confusing wording clear.
Why it matters
Give each control an appropriate label and associate it programmatically with that control. Use help text for format or context rather than asking the placeholder to do every job. Check the filled-in state, not only the empty mockup.
Steps
- Identify what information each field requests in ordinary language.
- Keep its label available and connect it to the control in the implementation.
- Test the field with existing content, an error and assistive technology.
An example
A Date field keeps its label and format instruction visible after the user enters a value that needs correction.
Check your result
Can the user identify the requested information without clearing the field or remembering a vanished hint?
Keep this limit in mind
- Some controls have context-specific labelling patterns. A technical label association alone does not make confusing wording clear.
Connected ideas
Useful withMake the error show the next repair
Evidence and sources
Supports
WAI guidance describes associating labels with form controls and warns against relying on placeholder text as a replacement for labels.
A programmatic label and a usable visible instruction solve related but distinct needs.
Labeling Controls · Associating labels and placeholder discussion.