HTML: input placeholder
The placeholder attribute displays a short hint inside an empty input field.
What you will learn
- How to provide an example or format hint
- Why a placeholder is not a label
- How to keep hints readable and useful
Minimal example
<label for="phone">Phone number</label>
<input id="phone" name="phone" type="tel"
placeholder="e.g. 555-0100">The label remains visible while the placeholder gives an example of the expected format. The placeholder disappears when the user starts typing.
Use it for hints, not names
A placeholder has low contrast in many browsers and is not a reliable accessible name. Always provide a label or another appropriate naming technique. Put required instructions and error messages outside the placeholder.
Common mistakes
- Do not use placeholder text as the only label.
- Do not put essential instructions only inside the placeholder.
- Keep the hint short and do not repeat the visible label.