The placeholder attribute provides a short hint that describes the expected value of an input field. It appears inside the input box as gray text until the user enters a value, helping users understand what kind of data to type.
What is the placeholder attribute used for in input fields?
Preparing for interviews?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
Quick Answer
Answer
Overview
The placeholder attribute gives users a visual hint about what kind of information is expected in a form field. It displays light-gray text inside an input box before the user types anything.
Attribute | Purpose |
|---|---|
| Provides a short example or hint to guide user input |
Display behavior | Visible until the user types in the field |
Accessibility | Should not replace proper |
Common usage | Search bars, login forms, email fields |
Example
This example shows how the placeholder helps users understand what to type:
HTML
<form>
<input type="text" name="email" placeholder="Enter your email">
<button type="submit">Subscribe</button>
</form>
In the example above, the phrase Enter your email appears inside the text box until the user starts typing.
Common Use Cases
- Search boxes — e.g.,
placeholder="Search..." - Login or sign-up forms — hinting expected input (like username or email)
- Contact forms — suggesting format, e.g.,
placeholder="Your message here..."
Accessibility and Best Practices
- Always pair
placeholderwith a visiblelabelfor accessibility. - Do not rely on placeholders for required instructions; they disappear when typing.
- Ensure placeholder contrast meets accessibility guidelines (WCAG 2.1 AA).
Still so complicated?
Think of the placeholder as a hint — it whispers what to type, but once you start writing, it quietly steps aside.
Summary
- The
placeholdergives short hints inside inputs - It disappears when typing begins
- It should not replace
labelelements - Use it for hints or examples, not for required instructions
Similar questions
Guides