One of my favorite new pieces in HTML5 is the ability to add Placeholder Text easily. The placeholder text is the grey text that you find in an input field that is used to give a hint to the users on what input is expected in that field. Once users start typing in the input field, this text will disappear.

A few things that should be noted: according to the specification, the placeholder attribute should not be used as an alternative to a label and it is also suggested that this attribute should only be applied to input types that require text, e.g. text, password, search, email, textarea and tel.

Adding placeholder to the input types: radio and checkbox will not make any difference.

Browser Compatibility

This new HTML5 feature unsurprisingly is not supported in old browsers and is currently only fully supported in: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 and Internet Explorer 10 (which hasn’t been officially released yet).

Placeholder Polyfills

Nevertheless, if we need to display the placeholder in older browsers but still be able to use the placeholder attribute, we can use Polyfills. There are a lot of Placeholder Polyfills out there but in this example we are going to use the PlaceMe.js;

Final Thought

The HTML5 Placeholder attribute certainly makes adding placeholder text easier. Now it is up to us, web developers and designers, to choose which method to use: JavaScript or HTML5.

If you consider that using Polyfills and jQuery to support old browsers is redundant, then JavaScript is apparently more suited for the job. But if you can peacefully ignore the old browsers then using HTML5 Placeholder is probably a better way.