Earlier this week I wrote a post that discussed putting labels inside form inputs to create cleaner forms. The HTML5 placeholder spec will do this same thing, but with much less code and the bonus of avoiding JavaScript.
Simply add placeholder="foo" to your input element, and that's it:
<input name="last" placeholder="Last Name">
Compare this to the old way as explained in the previous post:
<input name="last" id="last" onblur="if (this.value=='') this.value = 'last name'" onfocus="if (this.value=='last name') this.value = ''" type="text" value="last name">
Unfortunately similar to other new HTML5 specs, the support for this is still limited.
- Chrome 4.0+
- Firefox 4.0+
- Safari 4.0+
- Opera 11.0+
- IE 10.0+
Specifically the lack of IE support could be a problem for anyone wanting to support the majority of browsers. The importance of usability, especially with labels of forms is extremely important. I would suggest using Modernizr or a similar library, combined with the two techniques above. This will ensure that users with modern browsers get the fastest experience, while stragglers still get a similar experience.
webdesignerwall and Nico Hagenburger wrote a good example of using Modernizr to ensure proper placeholder behavior:
<script src="jquery.js"></script>
<script src="modernizr.js"></script>
<script>
$(document).ready(function(){
if(!Modernizr.input.placeholder){
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
