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.

<input type="hidden" name="token" placeholder="Session token">

Fixed: Remove the placeholder attribute.

<input type="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>

<input type="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>

<input type="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.

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

<input type="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.

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

<input type="date" id="birthday" name="birthday">

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

Invalid: placeholder on a file input

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

<input type="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").

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

<input type="file" id="upload" name="upload">

Valid: placeholder on supported input types

These are all valid uses of the placeholder attribute:

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

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

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

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

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

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

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

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

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

<input type="number" id="qty" name="qty" placeholder="1">

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

<input type="password" id="pw" name="pw" placeholder="Enter your password">

A required <select> drop-down must start with a placeholder <option> whose value is empty, so the browser can tell when the user hasn't picked anything.

A <select> with no multiple attribute and no size greater than 1 renders as a drop-down, and the browser selects its first option by default. For required to block an untouched drop-down, that first option has to mean "no choice yet". HTML calls it the placeholder label option, and it only counts as one when its value is the empty string.

An option's value is its value attribute or, if it has none, its text. Both <option value="none">Select a topic</option> and <option>Select a topic</option> have a non-empty value, so the browser accepts the prompt as a real answer. The form submits even if the user never opens the drop-down, and the server receives none or Select a topic as the chosen topic.

Give the first option value="" and keep the prompt as its text. An empty <option></option> also passes this check, but the validator then asks for a label attribute, so a text prompt is simpler. If you want a list box that shows every option at once instead of a drop-down, set size to the number of options, and the validator stops asking for a placeholder.

Invalid example

<label for="topic">Topic</label>

<select id="topic" name="topic" required>

<option value="none">Select a topic</option>

<option value="billing">Billing</option>

<option value="support">Technical support</option>

</select>

Valid example

<label for="topic">Topic</label>

<select id="topic" name="topic" required>

<option value="">Select a topic</option>

<option value="billing">Billing</option>

<option value="support">Technical support</option>

</select>