I recently had a comment on my how to check and uncheck a checkbox with jQuery post suggesting to use a convuluted method to make the text alongside a checkbox toggle its state. I suggested using <label>s instead which is much easier and not reliant on Javascript but it got me thinking that perhaps a lot of people don’t know about the very useful <label> tag, hence this post.
Working example
The following shows some labels working in action. I’ve styled the labels so the cursor becomes a hand when mousing over it to show the user it does something when clicking it (refer to my CSS cursor property post for more details).
Try clicking each of the labels to see what happens.
Traditional use
The traditional use of the <label> tag uses the “for” attribute to specify the id of the form element that the label belongs to.
The following is the HTML for the checkbox example above. Note the input’s id value is the same as the label’s for value:
<input type="checkbox" id="example_checkbox" /> <label for="example_checkbox">Label for checkbox</label>
And here’s the HTML for the radio buttons:
<input type="radio" id="example_radio1" name="radioA" /> <label for="example_radio1">Label for radio 1</label> <input type="radio" id="example_radio2" name="radioA" /> <label for="example_radio2">Label for radio 2</label> <input type="radio" id="example_radio3" name="radioA" /> <label for="example_radio3">Label for radio 3</label>
And finally for the text input:
<label>Label for textbox <input type="text" /></label>
More compact use
The traditional use of the label tag as shown above requires a “for” property for the label element and a matching “id” element for the form input element. There is a simpler way to do it that doesn’t require these elements which is valid and works in all browsers other than IE6 and earlier (see the browser compatibility section below for more details).
To use this method, enclose both the text for the label and the field itself inside the label tag as follows:
<label><input type="checkbox" /> Label for checkbox</label>
<label><input type="radio" name="radioB" /> Label for radio1</label> <label><input type="radio" name="radioB" /> Label for radio2</label> <label><input type="radio" name="radioB" /> Label for radio3</label>
<label>Label for textbox <input type="text" /></label>
Browser compatibility
The traditional use works in all traditional browsers, but not on iPad or iPhone versions 3 or 4 (maybe it will in later versions).
I have tested the more compact use suggested above in the following browsers with the following results:
- Chrome 6 – works
- Internet Explorer 6 – does not work
- Internet Explorer 7 – works
- Internet Explorer 8 – works
- iPad / iPhone 3 & 4 – does not work (but neither does the traditional usage)
- Firefox 2.0 – works
- Firefox 3.0 – works
- Firefox 3.6 – works
- Opera 10.6 – works
- Safari 5 – works
The nice thing if you go for the more compact use is it won’t stop your forms working in IE6; you just can’t click the label and get it to toggle the radio button or checkbox, or select the field. So all that is lost is a little bit of usability for a small minority of users (which is getting smaller daily).
The cursor property
I noted in the working example section that I’d set the cursor to a hand so when the user mouses over the label it doesn’t show the default arrow. This is done in the style sheet like so:
label {
cursor: pointer;
}
When using the more compact method you won’t want the cusor to show as a pointer in Internet Explorer 6 so the following addition will ensure it remains as the default.
* html label {
cursor: default;
}
Note that you’d only need to add this if a) you bother with IE6 at all anymore and b) you are using the more compact method.