HTML Form Default Value Removal on Focus

HTML Form Default Value Removal on Focus

By Steve on

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}


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!

About Steve

Steve is the lead developer/geek!. Steve likes soup; perhaps a little too much as it seems to be all he eats?! He's currently into his fitness and aiming to shed lots of excess weight and get fighting fit.

Related Posts