References

Beginner-friendly references for web development, with live, editable examples.

The HTML placeholder attribute

Attribute All modern browsers Updated
Quick answer

The HTML placeholder attribute shows a short hint inside the empty field describing the expected value. It is used on the <input> and <textarea> elements.

Overview

The placeholder attribute shows faint hint text inside an empty <input> or <textarea> — an example value or format hint that disappears the moment the user starts typing.

The critical rule is that a placeholder is not a label. It vanishes on input, so the user loses the hint as they type; its default contrast is often too low to read comfortably; and it is not a reliable accessible name. Every field still needs a real <label> — treat the placeholder as supplementary at best.

Use it for a brief example (you@example.com) or a format hint (DD/MM/YYYY), never for essential instructions. Style the text — usually darkening it for readability — with the CSS ::placeholder pseudo-element.

Syntax

<input type="search" placeholder="Search…">

Values

Value
A string of hint text.

Example

Live example 
<input type="search" placeholder="Search the docs…" aria-label="Search" style="padding:8px;width:100%;">

Best practices

  • Never use a placeholder in place of a <label> — it disappears as the user types.
  • Keep it to a brief example or format hint, not essential instructions.
  • Darken the faint default text with the CSS ::placeholder pseudo-element for readability.
  • Pair every field with a real, visible <label>.

Accessibility

Placeholder text is not a label — it disappears when typing and has poor contrast by default. Always provide a real <label> as well; use the placeholder only for an example or format hint.

Frequently asked questions

What does the placeholder attribute do?
It shows hint text in an empty input or textarea that disappears once the user types.
Can a placeholder replace a label?
No. It vanishes on input and is not a reliable accessible name, so a real <label> is always required.
Why is placeholder text so faint?
Browsers default it to a light gray. Darken it with the CSS ::placeholder pseudo-element for readability.
What is a good use for a placeholder?
A brief example value or format hint, such as you@example.com or DD/MM/YYYY.
ping played