The placeholder attribute shows light hint text inside an empty field — but it is not a substitute for a real <label>, no matter how tempting that shortcut looks.
Syntax
<input type="text" placeholder="e.g. Aman Sharma">Basic Example
<label for="name">Full Name</label>
<input type="text" id="name" name="name" placeholder="e.g. Aman Sharma">Browser output: light gray example text sits inside the empty field — the moment the user types anything at all, that hint text disappears completely, with nothing left behind to remind them what the field was for.
How It Works
placeholder is purely a temporary hint — it is never submitted as the field's value, and it is not announced the same reliable way a real <label> is by every screen reader.
Important Attributes
| Attribute | Purpose |
|---|---|
placeholder | Example/hint text, visible only while the field is empty |
Real-World Example
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone" placeholder="e.g. +91 12345 67890">Used correctly here — a real, always-visible label states what the field is, and the placeholder adds a helpful formatting example on top of it.
Why placeholder Is Not a Label
placeholder | <label> | |
|---|---|---|
| Visible once typing starts? | No — disappears entirely | Yes — always visible |
| Reliable screen reader support? | Inconsistent — some announce it, some don't, and never as reliably as a real label | Yes — the standard, guaranteed mechanism |
| Expands the clickable target? | No | Yes |
Common Mistakes
- Using
placeholderalone, with no real<label>, as a way to "save space" — this is one of the most common, most damaging form accessibility mistakes on the web - Low-contrast placeholder text that's genuinely hard to read for users with low vision
- Putting critical instructions only in the placeholder, which vanish the instant a user starts typing and can no longer be referenced
Best Practices
- Always pair
placeholderwith a real, visible<label>— never use it as a replacement - Use placeholder text specifically for a format example, not for essential instructions
Accessibility Considerations
This is a core accessibility topic — a field styled to look clean with only a placeholder and no visible label frequently fails basic accessibility checks and confuses users the moment they start typing and the hint disappears.
SEO Considerations
No direct ranking effect.
Browser & Modern HTML Notes
Default placeholder styling (light gray text) is intentionally low-contrast by browsers to distinguish it from real entered content — a further reason it should never carry information a user genuinely needs to keep referring back to.
Mini Practice
- Fix a field that only has a placeholder by adding a real, visible
<label>. - Write a good placeholder example (not an instruction) for a "Course Search" field that already has a proper label.
