In my previous article on What is HTML5? I pointed out some of the new features which are coming with HTML5.

One of the advantages of HTML5 are the features to HTML forms. The benefit of HTML5 is that it will remove the need to add JavaScript to your HTML forms. Normally with HTML forms there are a number of tasks which you will always have to do. The main one is always validation a form should always have client side validation, but others are date pickers and placeholders.

Placeholders are a very useful feature in HTML5, this is an attribute which will display default text in the form input when it is empty but on focus will be removed. This is great feature which you would have to do manually using JavaScript in previous HTML but it is not currently supported in all browsers.

All new browsers support placeholders but anything lower than IE9 will not support HTML5 placeholders.

If you want to use placeholders in these older browsers you will need to add JavaScript to remove the text on focus, just like the placeholder will work.

In this article I will show you how to use placeholders and how to use them on older browsers.

HTML5 Placeholder Attribute

To use the placeholder you just add the attribute in the input tag.

<input type=text placeholder=Click here to make text disappear />

Styling HTML5 Placeholder

HTML5 placeholders can be styled in exactly the same way as you would style other elements on the page.

Firefox and Webkit browsers have a CSS property that allows you to easily style the text used as the placeholder of an input box. Just use the following snippet to change the style of your HTML5 placeholders.

input::-webkit-input-placeholder {
    color: #999;
    font-style: italic;
}

input:-moz-placeholder {
    color: #999;
    font-style: italic;
}

JavaScript Placeholder

Before HTML5 we had to use JavaScript to fake the same behaviour as the placeholder attribute. We would need to use the value attribute to add the default text and then on focus we need to remove the default value. But then on blur if the value is empty we want the default text to return.

<input type="text" value="Click here to make text disappear" onfocus="if (this.value == 'Click here to make text disappear') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Click here to make text disappear';}">

Use Modernizr To Display Placeholder

The best way to handle the new HTML5 features on older browsers is to use the modernizr JavaScript file.

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.

The Modernizr script will check to see if the placeholder attribute is supported on your browser. If it is not supported it will run some JQuery code to act as the placeholder.

Use the following code snippet to act as the placeholder attribute.

<script src="jquery.js"></script>
<script src="modernizr.js"></script>
<script>
$(document).ready(function(){
      if (!Modernizr.input.placeholder) {
        $j('input[type="text"]', 'header').each(function () {

          if (!$j(this).val()) {
            this.value = $j(this).attr('placeholder');
          }

          $j(this).focus(function () {
            if (this.value == $j(this).attr('placeholder')) {
              this.value = '';
            }
          });

          $j(this).blur(function () {
            if (this.value == '') {
              this.value = $j(this).attr('placeholder');
            }
          });

        });
      }

}

</script>

Using the above script will allow you to use cross browser HTML5 placeholders.