Placeholder HTML 5 Attribute: Default text field values

Creating text fields with default values is now easy thanks to HTML 5. There is a new HTML attribute specifically just for this purpose – the placeholder attribute. As the descriptive attribute suggests, it allows you to create place holder text which is visible if the text field is empty.

The attribute itself is supported in Firefox 4 and above, Chrome 4 and above, Safari 3.1 and above (and iOS Safari 3.2 and above), Opera 11 and above, and Internet Explorer 10 and above. For Safari version 3.1 through to version 4 and Opera version 11 through to version 11.5, the attribute is not supported on the textarea HTML element.

Example usage

<input type="email" name="email" placeholder="Your e-mail address">

In the example above, the placeholder attribute is used as the value of the text field whenever the text field is empty. If a user inputs text and then deletes it afterwards, the placeholder attribute value is used as soon as the text field becomes empty.

Making placeholder values disappear on focus

By default, placeholder values remain visible until at least one character is input into the text field. If you want to change this behaviour so it removes the placeholder when a user selects the text field (changes focus to it), here is how:

<input type="email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your e-mail address'" placeholder="Your e-mail address">