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.
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.
2 comments on »HTML5 Placeholder Attribute«
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?
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.