HTML5 placeholder attribute

HTML5 introduces a new placeholder attribute for input elements. Often it is useful to preset text input fields with certain values, to give an indication on which data format is expected for the input, or sometimes maybe you just don’t want to use a <label> tag for layout or design reasons. On input focus, the preset value will disappear to allow users to enter their value without having to select and delete the placeholder first.

Prior to HTML5 this effect was achieved using focus and blur events like in this example (jQuery syntax):

<input type="text" id="myinput" value="Placeholder text">

<script>
	var myinput = $('#myinput');

	myinput.focus(function() {
		if (myinput.val() == 'Placeholder text') myinput.val('');
	});
	myinput.blur(function() {
		if (myinput.val() == '') myinput.val('Placeholder text');
	});
</script>

With HTML5 you can just say

<input type="text" id="myinput" placeholder="Placeholder text">

Styling placeholders

So far the placeholder attribute is only supported in the latest browsers and it gets even more complicated when trying to style it with CSS. At the time of writing, only WebKit and the latest Gecko version seem to allow styling of placeholders with CSS (source):

input::-webkit-input-placeholder {
	color: #999;
}
input:-moz-placeholder {
	color: #999;
}

Alternatives

Since browser support for placeholders is still in very early stages, it can still be good to use focus/blur events. A better alternative however is to start using placeholder attributes now and use one of several available Javascript plugins to support older browsers. The newer browsers will just their built-in support for the new attribute.