# Attribute “placeholder” is only allowed when the input type is “email”, “number”, “password”, “search”, “tel”, “text”, or “url”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/attribute-placeholder-is-only-allowed-when-the-input-type-is-email-number-password-search-tel-text-or-url
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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.

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

**Fixed:** Remove the `placeholder` attribute.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<label for="birthday">Birthday</label>
<input type="date" id="birthday" name="birthday">
<small>Format: YYYY-MM-DD</small>
```

### Invalid: `placeholder` on a file input

```html
<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").

```html
<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:

```html
<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">
```