Label as default value

This is particularly useful when there is a limited space available for a form. You can set the actual name of the field or a example value, so the user can better understand what he/she has to fill in. There are 2 methods available for implementing this:

1. Using a default value for the field and Javascript
• Add First Name* in the Default Value property of your textbox field.
• Add the following script in the Additional attributes property of your textbox field.

 
onfocus="if (this.value=='First Name*') this.value='';"
onblur="if (this.value=='') this.value='First Name*';"
 

The script will need to be placed in the Additional attributes property of your textbox field.

Using this script will cause the default value upon clicking inside the field to disappear. If nothing is filled the original value will be reverted. If this field is set to be required, it will display a validation error.



2. Using the default HTML placeholder property

Simply add placeholder="First Name*" in the Additional Attributes area of your textbox field. This will display First Name* in the text box until at least one character is typed in. Clearing the field will return it to it's original state.

Please consult the HTML reference on the placeholder property for more information on this topic.

10 persons found this article helpful.

You Should Also Read