User interface pros and human factors experts spent years learning
how to design software applications for maximum ease of use. Then
along came the Web, and all that knowledge was thrown out the window.
One of the main differences between standard Windows applications
and Web applications is in the way each handles form fields. For
instance, imagine a typical checkbox with a label next to it. In
a standard Windows application, the user can click on either the
checkbox or the label. On a Web page, the user can click only on
the checkbox.
For example, clicking the label of the following checkbox will
not change the checkbox status--you must click on the checkbox itself
to check or uncheck the control
If novice Web users visit your Web site, they may have difficulty
filling out your forms because they just don't work they way they
expect them to--the way that they've been trained by their existing
applications. Also, some users have trouble clicking on the checkbox,
because they lack the ability to move the mouse and click on
such a small area.
HTML 4 provides a solution for this problem: the LABEL tag. Internet
Explorer supports the tag, but unfortunately, Netscape 4 does not.
What to do? Use JavaScript instead! This month's script shows you
how to create checkboxes and radio buttons for which clicking on
the associated text label works the same as clicking on the form
field itself. Try it !.
A.noLink {text-decoration:none; color:black}
This script starts off by setting a specific style for these labels.
We want them to appear to be completely normal text, with no underlines
and no special color identifying them as links. This style will
apply to all links that have the class set to "noLink".
<a href="javascript:toggleCheck('sun')"
class="noLink">
<input type= "checkbox" name= "sun">Sun<BR>
</a>
The HTML for
a checkbox is simple. We take a normal INPUT tag and its associated
label ("Sun"), and wrap it inside a ANCHOR (link) tag associated
with the "noLink" style that we just created. Now, clicking on anything
inside that tag causes the JavaScript function toggleCheck() to
run, and in this particular example, passes the parameter "sun"
to match the name of the checkbox.
<a href="javascript:toggleRadio('colorChoice','red')"
class="noLink"><input type="radio" name="colorChoice"
value= "red">Red<BR></a>
Here's the HTML
for a radio button. Again, there's the INPUT tag and associated
label ("Red"), wrapped inside an ANCHOR tag. In this case, if the
user clicks on the text, it'll call the JavaScript function toggleRadio().
This example passes in two parameters, "colorChoice" and "red",
to match the name and value, respectively, of the radio button.
function toggleCheck(thisField) {
checkSet = eval("document.myForm." + thisField)
checkSet.checked = !(checkSet.checked)
}
Here's the entire
toggleCheck() function. The parameter thisField is used to pass
in the name of the checkbox field. By combining the field name with
the hard-coded name of the form, you can get a reference to the
actual object (instead of just a string). The script stores the
object reference in the variable checkSet. Checkbox objects have
a property called checked, which returns true when the checkbox
is checked and false when it isn't. We're just going to toggle it
from true to false or vice versa, by means of the ! (Boolean NOT)
operator. Resetting the checked property updates the visual representation
of the checkbox in the form automatically.
function toggleRadio(thisField,thisValue) {
radioSet = eval("document.myForm."+thisField)
for (i=0;i < radioSet.length;i++) {
if (radioSet[i].value == thisValue)
radioSet[i].checked
= true
}
}
The function
toggleRadio() is more complex, but not by much. This function accepts
two parameters: thisField, which is the name of the radio button,
and thisValue, the value of the radio button. Again, we start off
by obtaining an object reference by querying the document for the
object name formed by combining thisField with the form name. The
resulting script stores the resulting JavaScript object in the variable
radioSet. That field, however, is an array, not a single field.
That means that we have to have a loop through the possible values
to see which particular radio button should be set. The property
radioSet.length gives the number of radio buttons in the array,
and we can then compare radioSet[i].value to the thisValue parameter
to see if it matches. If it does, then radioSet[i].checked is set
to true, which automatically turns the previously set radio button
off and redisplays the form fields.
Include these
two functions in your code libraries, and then add the simple anchor
around your radio buttons and check boxes and their associated labels.
It's a small amount of code, but your Web site's users will thank
you.
