Form Usability and JavaScript

There are a variety of form usability improvements that can be made using JavaScript, including focusing fields, automatically moving to other fields once a field is complete, intelligent use of the readOnly and disabled properties, and managing keyboard access, such as accelerators. This section presents an overview of a few of the possibilities with these usability improvements.

First Field Focus

The user should be able to quickly begin entering data into a form upon arriving at a page. While the TAB key can be used to quickly move between fields, notice that most browsers do not focus the first form field on the page by default, and the user may be forced to click the field before starting keyboard entry. With JavaScript it is easy to focus the first field in a form, and this should improve form entry in a subtle but noticeable way. We might use the onload event for the document to trigger the focus. For example, given a form testform and the first field named firstname, we would set

<<body onload="window.document.testform.firstname.focus();">>

Of course, you could write a generic routine to focus the first field of the first form using something like this:

<<script type="text/javascript">>
function focusFirst()
{
   if (document.forms.length >> 0 && document.forms[0].elements.length >> 0)
       document.forms[0].elements[0].focus();
}
window.onload = focusFirst;
<</script>>

Labels and Field Selection

While the <<label>> tag is useful to group items in forms for reading by non-visual browsers, it also could be used with JavaScript to improve form usability. For example, we may desire to relate label actions with field actions. The idea is that when the label receives focus from the user, either by clicking on it or using an accelerator key, the focus should switch to the associated field. The click-select action of the label can easily be simulated using a little bit of JavaScript:

<<form name="myform" id="myform" action="#" method="get">>
<<label onclick="document.myform.firstname.focus();">>
 First Name:
 <<input type="text" name="firstname" id="firstname" />>
<</label>>
<</form>>

In this example, a modern browser brings the cursor to the associated field when the user clicks on the label by invoking its focus() method. Fortunately, older browsers will just ignore the <<label>> tag as well as the JavaScript in its event handler attribute.

Note

You could, of course, also write a very generic function to focus the first <<button>>, <<input>>, <<select>>, <<textarea>> within a <<label>>, or the value of its htmlFor property.

Status Messages

Besides using tool tips as defined by an element’s title attribute, it may be useful to utilize the status bar to provide information to the user about the meaning and use of various form fields. While the status bar may not be in the primary area of focus for the user, unlike the tool tip it is not transitory and can be set to display a message as long as the field is in focus. We can use the status property of the Window object to set the status message when a field is focused—for example:

       
<<input type="text" name="fullName" id="fullName"
       size="40" maxlength="80"
       title="Enter your full name (Required field)"
       onfocus="window.status='Enter your full name (required)';"
       onblur="window.status='';" />>

Disabling Fields

A disabled form field should not accept input from the user, is not part of the tabbing order of a page, and is not submitted with the rest of the form contents. The presence of the HTML 4 attribute disabled, as shown here,

<<input type="text" value="Can't Touch This" name="field1"  
 id="field1" disabled="true" />>

would be all that’s necessary to disable a field under an XHTML 1.0 or HTML 4.0–compliant browser. The browser usually renders a disabled field as “grayed out.”

JavaScript can be used to turn disabled fields on and off depending on context. The following markup shows how this might be used.

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>
<<html>>
<<head>>
<<title>>Disabled Field Demo<</title>>
<<meta http-equiv="content-type" content="text/html; charset=utf-8" />>
<</head>>
<<body>>
<<form name="myform" id="myform" action="#" method="get">>
Color your robot? &nbsp; &nbsp;
Yes <<input type="radio" name="colorrobot" id="colorrobot" 
     value="yes" checked="true"
onclick="myform.robotcolor.disabled=false;robotcolorlabel.style.color=
'black';" />>
No <<input type="radio" name="colorrobot" id="colorrobot"
     value="no" 
onclick="myform.robotcolor.disabled=true;robotcolorlabel.style.color='gray';
" />>
<<br />><<br />>
<<label id="robotcolorlabel">>
Color: 
<<select name="robotcolor" id="robotcolor">>
   <<option selected>>Silver<</option>>
   <<option selected>>Green<</option>>
   <<option selected>>Red<</option>>
   <<option selected>>Blue<</option>>
   <<option selected>>Orange<</option>>
<</select>>
<</label>>
<</form>>
<</body>>
<</html>>

Unfortunately, the previous example does not work in much older browsers like Netscape 4 that lack full HTML 4 support. However, note that it is possible to simulate disabled fields in even very old browsers with a continual use of the blur() method for the “pseudo-disabled” fields as a user tries to focus them. Obviously, such a technique is best left for the history books, but it is possible if extreme backward compatibility is your goal.