Part of the HTML5 Forms spec that is already being implemented in many browsers is the ‘Placeholder’ attribute.

Like many things in the HTML5 spec, this comes from what people are already doing, in this case with things like the jQuery Watermark Plugin. It creates light grey text in text input boxes giving the user direction to what and how data should be entered. This is especially useful in giving direction on how to enter things like dates in more complex web forms.

For example:

1
2

<label>Date of Birth</label>
<input type="text" name="DOB" placeholder="dd/mm/yy">

There’s also lightweight and robust JS plugins available to force support of the placeholder attribute in older browsers.

The HTML5 spec states:

The placeholder attribute should not be used as an alternative to a label.

This is definitely important for most custom and/or complex forms, but I think for something simple like a search input the label really isn’t necessary. I decided to take this further on this site with the WordPress comments form, which are very ubiquitous across the web and familiar to users, you can get away losing the labels and simply using placeholders. It simplifies the form and removes visual clutter.

I decided to do this with the comments on this site, but I wanted to make sure that users definitely have JS enabled, forcing the placeholder, before removing the labels. I also wanted to avoid editing the core WordPress comments markup to I opted to add the place holders with jQuery.

Warning! The label element is still needed, especially to disabled users who might be using screen reader software. It is still an important semantic piece of the mark-up and we want to make sure it isn’t ignored by screens readers by using techniques like

1

label {display:none;}

…Instead I opted for

1

label {position:absolute; right:9999px;}

which visually hides it off the screen but is still readout by screen readers.

Here’s the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//Lets HTML5 awesomify the respond inputs
jQuery('#respond #author')
	.attr('placeholder', 'John Smith *');
jQuery('#respond #email')
	.attr('placeholder', 'hello@example.com *');
jQuery('#respond #url')
	.attr('placeholder', 'www.yourwebsite.com');
jQuery('#respond #comment')
	.attr('placeholder', 'Well hello there! *');
//Then get rid of the labels...
jQuery('#respond label, #respond span.required').css({
	position: 'absolute',
	right: '9999px'
});

Worth considering: a growing user trend is the use of the tab key to move focus between inputs. As soon as focus is set on the input the placeholder text is removed (which is good because the user doesn’t have to delete it themselves). What this does mean is that they can no longer see what they meant to be entering! In this context of something so familiar I felt the trade off of visual simplicity vs usability was worth it.