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

Placeholder HTML 5 AttributeIn 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.

Placeholder HTML 5 Attribute

Once you run the above code the following execution takes place –

Placeholder HTML 5 Attribute

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">

Be Sociable, Share!