HTML5 Tip: Placeholder atttribute

Posted in HTML5 Tips, JavaScript
Tags: ,

The HTML5 placeholder attribute lets you provide a short hint that helps people enter the right information into a form field.

The hint might be an example of the required information, or a description of the expected format. The placeholder hint or description is displayed inside the empty form field, and is removed as soon as the field is given focus.

Placeholder Uses

The trouble is that once the field is given focus and the placeholder text disappears, there’s nothing left to explain what kind of information should be entered. It’s also inconvenient for keyboard users. Instead of tabbing onto a field and reading the label, they need to look ahead to read the placeholder before moving focus to the field itself

http://www.nngroup.com/articles/form-design-placeholders/

So placeholders used in place for labels should only be used in rare cases where it is very obvious what the form value should be, otherwise it can confuse the visitor.

Placeholder Browser Support

The placeholder attribute is supported in all modern browsers after IE9.

Placeholder.js

The placeholder.js script written by James Allardice will allow legacy browsers to use this attribute and it will behave as if it was a modern browser.

Testing for Placeholder Support

You can use modernizr to test:

Or implement a JavaScript test (taken from Jeremy Keith’s HTML5 book):

Or even write a jQuery script to test that extends the jQuery.support.object

Legacy Browser Quick and Dirty Alternative

If you do not mind having some obtrusive JavaScript in your HTML, you can just use the value and placeholder attributes for all browser support and remove them with a little JavaScript:

Leave a Reply

Your email address will not be published. Required fields are marked *

*