HTML5 Placeholder Attribute

Published on May 23, 2012 by

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" />

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.

Author avatar
Bo Andersen

About the Author

I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!

2 comments on »HTML5 Placeholder Attribute«

  1. Dave

    Such a shame that it’s not supported in IE yet. I’ve searched for a workaround but i can’t find a good one. Any suggestions?

    • Andy

      Hello Dave,

      Thank you for your comment. Currently, there seems to be many ways of accomplishing this (some more reliably than others), for example with small libraries made for this exact purpose. It is something that I will definitely look into at some point, and I will put together an article about it after doing so.

Leave a Reply

Your e-mail address will not be published.