xlab : homepage

Highlighting Labels

When designing HTML forms it’s important to correlate a field’s label with it’s input, select or textarea element. With this is mind, I wrote some javascript the other night which enhances the UI of a form which uses correctly marked-up inputs and labels. The javascript simply highlights a checkbox or radio’s corresponding label, giving each label a nice visual clue to the selected options. A demo can be viewed here.

To begin with the HTML has to be correctly marked up. By this I mean that each label’s for attribute references the id attribute of the corresponding checkbox. For example :

<input type="checkbox" id="myCheckbox" value="1" /> <label for="myCheckbox">My Checkbox Label</label>

Radio buttons are a little different as a group of options is created by giving each input element the same name attribute, so the markup here is :

<input type="radio" name="Fancy a pint?" id="radio1" value="yes" />
<label for="radio1">Yes</label>
<input type="radio" name="Fancy a pint?" id="radio2" value="no" />
<label for="radio2">No</label>

If you’re familiar with standards-compliant web design most of this stuff is second nature, but I thought I’d make it clear, otherwise the javascript won’t function correctly.

Include the javascript file using the script element (or add to an existing .js file, or paste into the head of your document). Then declare some CSS properties for a class called checked. This is the name of the class which the javascript dynamically assigns to the label element.

The javascript consists of 6 functions :

• in_array - Replicates the functionality of the PHP function of the same name.
• addLoadEvent - Simon Willison’s cross-browser function for attaching event handlers to run after the page has finished loading.
• addEvent - Scott Andrew’s cross-browser function for attaching event handlers.
• findTarget - A cross-browser function to find the element calling a function.
• toggleLabel - This is where most of the functionality is. If the target (the element calling the function) is a checkbox, it attaches the class checked to it’s corresponding label if it is checked. If it’s not checked, the class is removed from the corresponding label. If the target is a radio, it finds all the labels associated to radios which share the same name, and toggles the class checked depending on whether or not it’s checked.
• setUpLabelHighlight - attaches toggleLabel to the onclick event of each radio and checkbox. Also runs through the document to find any checked radios or checkboxes. If it finds any, it attaches the checked class.

I’ve checked it on Firefox, Safari and IE6, but please let me know if there any problems with it.

Posted 4 years, 7 months ago