A Look into: HTML5 Placeholder Attribute

By . in Coding. Updated on .

One of my favorite new features in HTML5 is the ability to easily add placeholder text. Placeholder text is the gray text you find in an input field, used to hint to users what input is expected. Once a user starts typing in the input field, this text disappears.

Previously, this was commonly done with JavaScript, as follows:

<input type="text" value="Placeholder text"
    onfocus="if(this.value=='Placeholder text')this.value='';";
    onblur="if(this.value=='')this.value="Placeholder text";">

While there’s nothing wrong with this practice, HTML5 makes it easier.

HTML5 introduced a new attribute with a logical name: placeholder. Here is an example:

<input type="text" placeholder="Placeholder Text">

When viewed in a browser, the input field will now display the gray text, as shown below:

Input field showing placeholder text

A few things should be noted: according to the specification, the placeholder attribute should not replace a label. It’s also suggested that this attribute only be applied to input types requiring text, such as text, password, search, email, textarea, and tel.

Adding placeholder to radio and checkbox input types will have no effect.

Placeholder & CSS

Furthermore, styling placeholder text with CSS is possible, although at the time of this writing, it’s primarily limited to Firefox and Webkit-based browsers.

The following example shows how to change the placeholder text color to green in both Webkit and Firefox:

input::-webkit-input-placeholder {
  color: green;
}
input:-moz-placeholder {
  color: green;
}
Input field green placeholder text

Remember, ::-webkit-input-placeholder and :-moz-placeholder only affect the text style and cannot be combined into a single rule.

input::-webkit-input-placeholder, input:-moz-placeholder {
  color: green;
}

This piece of code won’t work.

Attribute Selector

CSS3 supports this attribute by introducing the [placeholder] attribute selector:

input[placeholder] {
  border: 1px solid green;
}

In the example above, we select every input with the placeholder attribute and change its border color to green.

Input field green border placeholder

Browser Compatibility

Unsurprisingly, this HTML5 feature isn’t supported in older browsers. Currently, full support is available in: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6+ and Internet Explorer 10+.

Placeholder Polyfills

Nevertheless, if you need to display placeholders in older browsers while still using the placeholder attribute, you can use Polyfills. Many Placeholder Polyfills are available; in this example, we’ll use PlaceMe.js:

<script src="jquery.js" type="text/javascript"></script>
<script src="placeme.js" type="text/javascript"></script>

PlaceMe.js, as shown above, depends on jQuery. Now, when viewed in an older browser like Internet Explorer 9, the input fields should display the placeholder text thanks to the polyfill.

View Demo Download Source

Final Thought

The HTML5 placeholder attribute certainly simplifies adding placeholder text. Now, it’s up to web developers and designers to choose which method to use: the traditional JavaScript approach or the HTML5 attribute.

If supporting older browsers with Polyfills and jQuery seems redundant for your project, the JavaScript method might be more suitable. However, if you can safely ignore older browsers, using the HTML5 placeholder attribute is likely the better approach.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail