HTML5 Placeholder Attribute

When creating web forms it is often nice to throw in a hint as to what should be entered into the field. This is a nice nuance that adds a nice level of interaction to your site. Previously you would have had to use JavaScript and click events to remove the hinting text from the form field and change the style once the user clicked on it.

042912_2146_HTML5Placeh1

That was a lot of work!! Finally in HTML5 you can placeholder text to your form fields with a simple HTML attribute:

<input type=”text” placeholder=”Last Name” />

Check out this Demo to see it in action: http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_input_placeholder

*BAD NEWS: It does not work in IE9 and below. It is currently supported in IE10 (only released as preview when writing this). It will work in most other browsers. Unfortunately for the time being, not working in IE9 might be a deal killer (at least for a while).

An additional key feature is that you can also use placeholder attribute for inputs of type “password”. Previously if you tried to do this with JavaScript you would need to switch out two different input elements so your placeholder text does not show “*****”.

Leave a Reply