Login
Menu

Placeholder HTML 5 Attribute: Default text field values

Home / Placeholder HTML 5 Attribute: Default text field values

Placeholder HTML 5 Attribute: Default text field values

Creating text fields with default values is now easy because of HTML 5. there’s a brand new HTML attribute specifically only for this purpose – the placeholder attribute. because the descriptive attribute suggests, it permits you to create place holder text that is visible if the text field is empty.

The attribute itself is supported in Firefox 4 and on top of, Chrome 4 and on top of, Safari 3.1 and on top of (and iOS expedition three.2 and above), Opera 11 and on top of, 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 isn’t supported on the textarea HTML component.

wb-2-1

From the example above, the placeholder attribute is used as the value of the text field whenever you will get the text field is empty. If a user first inputs text and then deletes it afterwards, the placeholder attribute value will be used as soon as the text field becomes empty.

wb-2-2

Once the above code get’s worked the following execution takes place –

wb-2-3

Making placeholder values disappear on focus

By default, placeholder values will remain visible until at least one character is input into the text field. If you wish to change this behavior 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">