HTML Form Default Value Removal on Focus

HTML Form Default Value Removal on Focus

By Steve on January 19, 2012

A common request from clients when building html forms for websites here at SEO Creative is for the field to have a default value which will disappear when users click on the box.  This is becoming very popular in new website design, negating the use of traditional labels, or even just span text next to the input describing the field.

To do this on page, simply use the below code example as a point of reference when building your forms:

{code type=php}


{/code}

For each input field you need to define the value.  Then add an onblur condition (when a user clicks away from an input field and the cursor loses it’s focus on the element) and an onfocus condition (when a user clicks the cursor into the input box element).  The code above checks the current box value.

  • If the value is equal to what you have defined it will change the value to ‘blank’.
  • If the value is blank when the user clicks away it will put the ‘default value’ back into the input field.
  • If the value is not equal to what you have defined (i.e. a user has entered text into the box) it will not change the field value on blur or focus.

Very simple, very handy and very cool!


Falkon blog post featured image for post - WordPress Templates

WordPress Templates

Ever wanted to customise a single page in WordPress with the template system but never knew how? Its simple with...