HTML Guides for placeholder

The placeholder attribute provides a short hint describing the expected value of an input field. This hint is displayed inside the control as light, greyed-out text when the field is empty and loses focus. It only makes sense on input types that present a visible text entry area where the user types characters directly. Input types like checkbox, radio, range, color, file, hidden, date, datetime-local, month, week, time, and image either don't display a text field at all or use a specialized UI widget (like a date picker or file selector), so the browser has nowhere to render placeholder text.

Using placeholder on an unsupported input type violates the HTML specification as defined by WHATWG. While browsers will typically just ignore the invalid attribute, it signals a likely mistake in your markup — perhaps the input type is wrong, or the hint should be conveyed differently (e.g., via a <label> or adjacent text). Keeping your HTML valid also improves maintainability, helps assistive technologies parse your page correctly, and prevents unexpected behavior if future browser versions handle invalid attributes differently.

It's also worth noting that even on supported input types, placeholder should not be used as a replacement for <label>. Placeholder text disappears as soon as the user starts typing, which can cause usability and accessibility issues. Always pair your inputs with a proper <label> element.

How to fix it

1. Remove the placeholder attribute if it's on an input type that doesn't support it.
2. Change the input type to one that supports placeholder if the current type is incorrect.
3. Use a <label> or visible helper text to convey the hint instead, especially for non-text input types.

Examples

Invalid: placeholder on a hidden input

A hidden input is never visible to the user, so a placeholder serves no purpose.

<inputtype="hidden"name="token"placeholder="Session token">

Fixed: Remove the placeholder attribute.

<inputtype="hidden"name="token">

Invalid: placeholder on a checkbox

Checkboxes don't have a text entry area, so there's nowhere for placeholder text to appear.

<label>

<inputtype="checkbox"name="agree"placeholder="Check to agree"> I agree

</label>

Fixed: Remove the placeholder and rely on the label text to convey the hint.

<label>

<inputtype="checkbox"name="agree"> I agree to the terms

</label>

Invalid: placeholder on a date input

Date inputs use a browser-provided date picker widget, not a free-text field.

<labelfor="birthday">Birthday</label>

<inputtype="date"id="birthday"name="birthday"placeholder="YYYY-MM-DD">

Fixed: Remove the placeholder. If you need to show a format hint, use a separate element.

<labelfor="birthday">Birthday</label>

<inputtype="date"id="birthday"name="birthday">

<small>Format: YYYY-MM-DD</small>

Invalid: placeholder on a file input

<labelfor="upload">Upload</label>

<inputtype="file"id="upload"name="upload"placeholder="Choose a file">

Fixed: Remove the placeholder. The browser provides its own label for file inputs (e.g., "No file chosen").

<labelfor="upload">Upload</label>

<inputtype="file"id="upload"name="upload">

Valid: placeholder on supported input types

These are all valid uses of the placeholder attribute:

<labelfor="email">Email</label>

<inputtype="email"id="email"name="email"placeholder="you@example.com">

<labelfor="phone">Phone</label>

<inputtype="tel"id="phone"name="phone"placeholder="+1 (555) 123-4567">

<labelfor="site">Website</label>

<inputtype="url"id="site"name="site"placeholder="https://example.com">

<labelfor="query">Search</label>

<inputtype="search"id="query"name="query"placeholder="Search articles…">

<labelfor="qty">Quantity</label>

<inputtype="number"id="qty"name="qty"placeholder="1">

<labelfor="pw">Password</label>

<inputtype="password"id="pw"name="pw"placeholder="Enter your password">