ireckon blog

How To: A simple trick to increase form functionality.

Posted by: Warwick on 22 Jul 2008 @ 9:55 pm Category: Web Design

I see it all the time. From small forms (e.g. logins or contact forms) to larger, more complex forms (e.g. sign-up or payment forms). It frustrates users and can even drive them away from your site.

What is it, you ask? It's when input boxes or text-areas have values in them that don't disappear when you select the field.

There are a variety of solutions for this, although some are better than others. The solution I have outlined below is the one I personally find is the easiest to implement and it also has the greatest versatility, in that it can be expanded in a range of ways to add even further functionality to your form.

First off we need to add this script to the header or an included script file.

function eFocus(field){
if (field.value == field.defaultValue)  {
field.value ='';     
}
field.className="inputon"   
}
function eBlur(field)
{
if (field.value == '')   {
field.value = field.defaultValue;  field.className="inputoff";     
}
else{
field.className="inputon";      
}
}  

Once that is done we simple add onblur and onfocus values to the field to which you want to add this functionality. So a text area would look something like this:

<textarea name="comments" class="inputoff" 
 onfocus="eFocus(this)" onblur="eBlur(this)">
  This is some content that will be removed when this 
 text-area will be selected
 </textarea>  

It's that simple. The content of your text area or input field will now disappear when the user selects the field.

While you could finish with this, the extra value of this script is that when you select a form field it can change the CSS class of that field.

<textarea name="comments" 
 class="inputoff" onfocus="eFocus(this)" onblur="eBlur(this)">
   This is some content that will be removed when this 
 text-area will be selected
  </textarea>  

This means that you can change the border colour, background colour, font colour or what ever your mind leads you to. While this doesn't help much on one text area or input field, when you add this functionality to all your input fields, text-areas or select boxes you can give the user some welcome feedback on what field they are in on your form.

And that's it. A simple snippet of javascript and a quick change to your form fields and you have added functionality to your forms that your users will welcome.

Stay tuned for more posts on how to use this base script to add even more functionality to your forms

Back to blog home

Comments

Leave a comment