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 TypeGood PlaceholderWhy
emaile.g., jane@example.comShows expected format
tel123-456-7890Clarifies separator style
urlhttps://example.comReminds to include protocol
text (date)MM/DD/YYYYShows date format
searchSearch articles...Clarifies scope
number0.00Shows 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 use placeholder as 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 or aria-describedby instead.

Limitations

  • Placeholder text is not submitted with the form. If the user leaves the field empty, the placeholder is not sent as the value.
  • placeholder does 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 ::placeholder pseudo-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