Dave Woods - Freelance Web Design Warwickshire

HTML5 Placeholder Attribute

Most of the attention for HTML5 has been given to the new elements and the use of video. However, one of the most useful features when creating forms is the introduction of the placeholder attribute for input elements.

Previously if we wanted to include some placeholder text in an input field we’d have to either use the value attribute or inject it using JavaScript, neither of which are the most accessible.

With HTML5 though, we can now use a new placeholder attribute to add text to the input field using the following:

<input type="email" id="input-email" placeholder="Enter your email address">

Placeholder Attribute Browser Support

The latest versions of Firefox, Safari, Google Chrome and Opera all support the placeholder attribute. However, IE9 and below have no support for the placeholder text so it’s important to consider how input fields will appear on those IE browsers.

I’d fully expect IE10 to support the placeholder attribute but for now and for the foreseeable future while older versions of IE are being phased out, we’ll need to implement a fallback.

Using the Label Element

Regardless of the HTML5 spec not requiring a label element to be associated with an input element, I still think it’s a good idea for accessibility purposes to include a label so it’s clear and easy to see what the form field does.

<label for="input-email">Email Address</label>
<input type="email" id="input-email" placeholder="Enter your email address">

jQuery Placeholder Attribute

As well as using the label element to clearly identify what the input does, I’d also consider using a jQuery solution so that anyone using IE that has JavaScript available will also see the placeholder text.

Daniel Stocks has written an excellent jQuery placeholder plugin which you can download from Github here:

All you need to do, is download the plugin (either the uncompressed or minified version) and include the following lines of HTML and JavaScript, making sure that the jQuery plugin has the correct path.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="jquery.placeholder.js"></script>
<script>
$('input[placeholder], textarea[placeholder]').placeholder();
</script>

Summary

And there you have it, a consistent appearance for the placeholder element across all browsers.

2 comments on “HTML5 Placeholder Attribute

  1. Pingback: HTML5 Placeholder Attribute - EtondeGroup Blog of Web Applications | EtondeGroup Blog of Web Applications