Aching Brain

When you have a check box as part of a form, there is generally some text associated with it, like ‘Yes’ ‘No’, etc. In an operating system environment (Explorer, Finder, Gnome/KDE, etc), the text associated with a check box is usually clickable, the result of which toggles the check box.

HTML forms, on the other hand do not generally have this capability. As HTML forms by default display OS GUI widgets (similar action buttons, drop down menus and the like), this (I think) detracts from the usability of a website.

Fortunately we can use the DOM, a little bit of JavaScript and some little used (it seems) structural markup to rectify this, and make your form more semantically representative of the information it conveys to boot! Let’s get it on.

We’ll start with a basic, unstructured form in minging, dirty HTML. The kind of HTML your grandma would write:


<form action="somewhere.php" method="post">
Box 1: <input name="box1" value="some value" type="checkbox" />
Box 2: <input name="box2" value="some other value" type="checkbox" />
</form>


The first step is to turn it into XHTML while getting rid of those semantically meaningless paragraph tags and replace them with the better smelling label tag (incidentally, I just got back from France to find some rancid chicken in the fridge. That was not a nice smell, but I digress. The HTML above smells worse. See? back on topic..).


<form action="somewhere.php" method="post" id="aForm"> <label for="box1">Box 1:
<input name="box1" id="box1" value="some value" type="checkbox" /></label>
<label for="box2">Box 2:
<input name="box2" id="box2" value="some other value" type="checkbox" /></label>
</form>


O’Reilly has this to say of the label tag:

The label element defines a structure and container for the label associated with an input element. Because the rendered labels for most form controls are not part of the element’s tag, the label attribute provides a way for an author to associate the context of a label with its control.

Additionally, the ‘for’ attribute in the label tag links the label with it’s control.

If your primary audience are Mac/IE 5 users, you can stop here - for them, clicking the text next to the check box will, uh, check the box. It’s almost as if it was planned. The rest of us, unfortunately aren’t so lucky..

Using the DOM, we can find the checkboxes on the page and change their status thus:


var theBox = document.getElementById(boxid);
theBox.checked = (theBox.checked ? false : true);


And then call this JavaScript via the onclick handler thus:


<form action="somewhere.php" method="post" id="aForm"> <label for="box1" onclick="checkTheBox('box1');">Box 1:
<input name="box1" id="box1" value="some value" onclick="return false;" type="checkbox" /></label>
<label for="box2" onclick="checkTheBox('box2');">Box 2:
<input name="box2" id="box2" value="some other value" onclick="return false;" type="checkbox" /></label>
</form>


Note that a handler is placed on the checkboxes themselves that effectively disables them. This is because of a little quirk whereby in most browsers (although not Safari), if you click the checkbox, it will check the box, then run the onclick handler attached to the parent label tag, which will uncheck the box. Or the other way round. Either way, disabling the the checkbox allows the checkbox to function ‘normally’, albeit at the price of altering how forms should work…

To make the form that little bit more semantically correct (and for it to validate), we can add fieldset and an optional legend tags thus:


<form action="somewhere.php" method="post" id="aForm"> <fieldset>
<legend>Check the mofo' boxes</legend>
<label for="box1" onclick="checkTheBox('box1');">Box 1:
<input name="box1" id="box1" value="some value" onclick="return false;" type="checkbox" /></label>
<label for="box2" onclick="checkTheBox('box2');">Box 2:
<input name="box2" id="box2" value="some other value" onclick="return false;" type="checkbox" /></label>
</fieldset>
</form>


That’s it, we’re done. Check out a (mostly - I’ve just this second found that Safari doesn’t like it, but I’ll look at it again tomorrow) working example here.

Popularity: 21% [?]