How can I make the text adjacent to my checkbox clickable?

This is actually a fun and relatively simple addition to any HTML form, for those of you building your own sites, and it's something that I wish more Web development tools did automatically. There are actually two ways you can accomplish what you seek, but the "standard" way to do it, the way that's detailed in the HTML 4 spec, doesn't work in all browsers, disappointingly.

Nonetheless, if you really want to be correct, here's the proper solution to the problem:

Nice, elegant, but not completely compatible with all the Web browsers on the market (notably Apple's Safari browser).

The way I prefer is to use JavaScript and exploit what we Webheads call the document object model to get to the specific variable that defines whether the checkbox in question is checked or not. Let me demonstrate as it'll be easier to understand!

Here's a typical rudimentary form, boiled down to its essence:

Render it and you'll see a form checkbox with some text adjacent, just as you'd expect:

To make the text clickable, you need to first name your form, which is easily done by adding a name="value" to the form tag itself: <form name="f1">

Now the JavaScript to access the checkbox status is:

    document.f1.cb1.checked

As you can see, we need both the form name and the variable name embedded. This value is going to be "true" or "false" depending on if the box is checked. To set it to true, therefore, we need simply specify:

    document.f1.cb1.checked=true;

So we can wrap the text we want to be clickable in a "span" and tie this to the JavaScript event onClick like so:

That works, kinda, as you can see here:

The problem is, this isn't actually how Windows (and Mac) dialog boxes work. The interface we're used to alternates between checked and unchecked as we click on the adjacent text, so the JavaScript code needs to be just a bit more sophisticated than what we have. One way to do it is to have some clumsy conditional code like "if checked set to false else set to true" but I prefer a bit more concise and elegant solution:

That does exactly what you seek: every time someone clicks on the text adjacent to the checkbox, the checkbox is set to whatever state it isn't currently. If it's true, then ! true is false so it's set to false (unchecked) and if it's unchecked, ! false is true, and it's checked.

Try it for yourself:

Hope that helps you improve your forms and make your HTML more usable!

Thanks to Greg Bulmash for helping debug a subtle Firefox incompatibility with the examples too. Greg runs a cool free clip art site.