placeholder
A short hint displayed inside a form field before the user types. Useful for format hints, but never a replacement for labels.
Overview
The placeholder attribute displays a short hint inside a form field when it is empty. The text disappears as soon as the user starts typing. It is meant for brief format hints — not labels, instructions, or anything the user might need to reference while filling out the field.
Applies to: <input> (text-like types), <textarea>
Values
| Input Type | Good Placeholder | Why |
|---|---|---|
email | e.g., jane@example.com | Shows expected format |
tel | 123-456-7890 | Clarifies separator style |
url | https://example.com | Reminds to include protocol |
text (date) | MM/DD/YYYY | Shows date format |
search | Search articles... | Clarifies scope |
number | 0.00 | Shows decimal precision |
<label for="email">Email</label><input type="email" id="email" placeholder="e.g., jane@example.com" /> <label for="phone">Phone Number</label><input type="tel" id="phone" placeholder="123-456-7890" /> <label for="dob">Date of Birth</label><input type="text" id="dob" placeholder="MM/DD/YYYY" />Placeholder Is Not a Label
This is the single most common accessibility mistake in form design. A placeholder is not a label. It fails as a label in several ways:
- It disappears. Once the user starts typing, the hint is gone. They cannot verify what the field is asking for.
- Low contrast. Placeholder text is intentionally muted. It often fails WCAG contrast requirements.
- No guaranteed accessibility. Not all screen readers announce placeholder text consistently. The
<label>element is the only reliable way to name a field. - Confuses autofill. Users with cognitive disabilities may mistake placeholder text for a pre-filled value and skip the field.
<!-- BAD: placeholder used as a label --><input type="email" placeholder="Email address" /> <!-- BAD: critical instructions in placeholder disappear on type --><input type="text" placeholder="Enter code from your authenticator app" /> <!-- GOOD: visible label with placeholder as format hint --><label for="code">Authenticator Code</label><input type="text" id="code" placeholder="e.g., 123 456" autocomplete="one-time-code" />Better Alternatives to Placeholder
For instructions, validation hints, or anything the user needs to see while typing, use persistent helper text below the field.
<form class="stacked"> <form-field> <label for="username">Username</label> <input type="text" id="username" name="username" pattern="[a-zA-Z][a-zA-Z0-9_]{2,15}" required /> <small>3-16 characters. Letters, numbers, and underscores.</small> </form-field> <form-field> <label for="amount">Transfer Amount</label> <input type="number" id="amount" name="amount" min="1" max="10000" step="0.01" placeholder="0.00" required /> <small>Minimum $1.00, maximum $10,000.00</small> </form-field></form>Helper text is always visible, always accessible, and does not disappear. Use placeholder for short format hints (like MM/DD/YYYY) and helper text for everything else.
Textarea
The placeholder attribute works on <textarea> as well. It disappears when the user types any content.
<label for="message">Message</label><textarea id="message" rows="4" placeholder="Write your message here..."></textarea>Styling
Use the ::placeholder pseudo-element to style placeholder text, and :placeholder-shown to style the input when the placeholder is visible (i.e., the field is empty).
/* Style placeholder text */input::placeholder,textarea::placeholder { color: var(--color-text-muted); opacity: 1; /* Firefox defaults to lower opacity */} /* Style the input when placeholder is visible (empty) */input:placeholder-shown { font-style: italic;} /* Show helper text only when placeholder is NOT visible */input:not(:placeholder-shown) + small { visibility: visible;}Firefox note: Firefox renders placeholders at reduced opacity by default. Add opacity: 1 to ::placeholder if you want consistent appearance across browsers.
Accessibility
- Always provide a visible
<label>element. Never useplaceholderas the only field label. - Placeholder text should meet WCAG 1.4.3 contrast requirements (4.5:1 ratio for normal text), though in practice most default browser styles fall short. Test your placeholder color.
- Keep placeholder text short. Screen readers that do announce it will read the entire string, and long placeholders are disruptive.
- Do not put instructions or validation rules in the placeholder. Use
<small>helper text oraria-describedbyinstead.
Limitations
- Placeholder text is not submitted with the form. If the user leaves the field empty, the placeholder is not sent as the value.
placeholderdoes not work on<select>. Use an empty-value first option instead:<option value="">Choose...</option>.- Placeholder text cannot contain HTML. Line breaks and formatting are ignored.
- The
::placeholderpseudo-element only accepts a subset of CSS properties (color, font, text-related). You cannot add borders, backgrounds, or pseudo-content to it. - Password managers may not correctly identify fields that rely on placeholder instead of
<label>for context.
See Also
required— mark fields as mandatorypattern— validate input formatautocomplete— browser autofill hints<input>element reference<textarea>element reference