The HTML5 placeholder attribute has quickly gained much popularity across the Internet. While developers used to be rather creative with their JavaScript skills to accomplish a supposedly trivial task, HTML5 has come to the rescue. What used to be rather complex to get to work across all of the major browsers is now part of the markup in the newest specification of HTML.

The HTML5 specification describes the attribute as follows:

“The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry. A hint could be a sample value or a brief description of the expected format. […] The placeholder attribute should not be used as an alternative to a label.”

Thus, it is clear that the way the attribute is currently being used is for the most part not how it was intended to be used. Rather, a label should still be present to describe what information expected, and the placeholder attribute should specify how, i.e. the data format. For example, a label could have a value of “Job type:,” whereas it would be sensible for the placeholder attribute to have a value similar to “E.g. web developer, designer or consultant.“

Here is an example of how to use the HTML5 placeholder attribute:

<form action="" method="post">
  <input type="text" name="txtFirstName" placeholder="First name" />
  <input type="text" name="txtLastName" placeholder="Last name" />
  <input type="submit" name="btnSubmit" value="Submit" />
</form>

Now, provided that your browser supports the attribute, you should be able to see the placeholder attribute in action below.

Browser support

As convenient as this attribute is, it is unfortunately not without problems – yet. As of this writing, all of the major browsers support this attribute, except for Microsoft’s Internet Explorer. Support will be added to Internet Explorer 10, but web developers must find alternative solutions for visitors with earlier versions until these are gradually phased out. Note that using the attribute with unsupported browsers is still perfectly fine; it will simply not be rendered.