HTML placeholder Attribute

HTML placeholder Attribute

The HTML placeholder attribute provides a short hint that describes the type of information expected in an <input> or <textarea> control. The hint is displayed when the control has no value and disappears when the user enters content.

Elements That Use the placeholder Attribute

The placeholder attribute can be used with the <input> and <textarea> elements.

placeholder Value

The value of the placeholder attribute is text containing a short hint, sample value, or brief description of the expected format. Placeholder text should be concise and should not be used for lengthy instructions.

<input type="text" placeholder="First and last name">

The placeholder appears inside the control while it is empty. When the user enters a value, the placeholder is no longer displayed.

Supported Input Types

The placeholder attribute applies to text-based input controls, including text, search, url, tel, email, and password. It can also be used with the <textarea> element.

Placeholder text does not become the value of the control. It is only a visual hint that is shown while the control has no value.

placeholder Examples

Text Input

A placeholder can show an example of the type of information expected in a text field.

<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Jane Smith">

Email Input

A placeholder can provide an example of the expected email address format.

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="name@example.com">

Textarea

The placeholder attribute can also provide a short hint inside a multi-line text control.

<label for="message">Message:</label>
<textarea id="message" name="message" placeholder="Enter your message"></textarea>

placeholder and Labels

A placeholder should not be used as a replacement for a <label>. A label identifies the purpose of a form control and remains available when the user enters a value, while placeholder text disappears when content is entered.

For better accessibility and usability, use a properly associated <label> to identify the control and use placeholder only when an additional short hint or example is helpful.

<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" placeholder="555-123-4567">

Common Mistakes

Do not use placeholder text as the only label for a form control. The placeholder disappears when the user enters information and is not a substitute for a properly associated <label>.

Do not use long instructions as placeholder text. Use a short word, phrase, or sample value and place longer instructions outside the control where they remain visible.

Do not expect the placeholder text to be submitted with a form. A placeholder is only a hint and does not provide a value for the control.

Do not depend on placeholder text for required information that users must remember after they begin typing because the hint is no longer displayed once the control contains a value.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The placeholder attribute is widely supported on applicable <input> controls and the <textarea> element in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the placeholder Attribute

The example demonstrates placeholder text in both an <input> control and a <textarea>. Enter text into either control to see its placeholder disappear.

Summary

The HTML placeholder attribute provides a short hint inside supported <input> controls and <textarea> elements when they have no value. Placeholder text can show a sample value or expected format, but it should supplement rather than replace a properly associated <label>.