Making checkbox and radio labels clickable

Question

A large number of (dare I say most?) sites do not make the labels clickable for their checkbox and radio inputs. It seems to be a huge usability gain for very little effort.

Answer 1

No reason other than laziness. <label>s are essential for accessibility, and are also pretty handy for those of us who have poor aim with our mouse clicks :)

Answer 2

No, there are no issues with that, but unfortunately this is one of the most ignored html tags. Agreed, this tag is extremely important for accessibility reasons and what is more when it comes to layouts for small devices such as mobiles, you can't live without this.

Answer 3

And here's a demonstration for those looking how to do it.

There is a way to connect the text near a form element with the element itself, so either one can be clicked to activate the control:

what would you like with your drink?

<label for="ice1"><input type="checkbox" name="withice" id="ice1">ice</label> 
<label for="ice2"><input type="checkbox" name="withlid" id="ice2">plastic lid</label>
<label for="ice3"><input type="checkbox" name="withstraw" id="ice3">straw</label>

Answer 4

The only difficulty I can think of is that your form controls need to have an ID attribute, and ID attributes need to be unique within your page.

If you were generating form fields programmatically, you would have to generate a unique ID for each of them within each page they appeared on. This could conceivably be an issue.

But generally, yeah, I think it’s just that programmers don’t have it in their heads.

In ASP.NET WebForms (or whatever it’d called), you want the AssociatedControlID attribute on the <asp:Label> element.

Answer 5

<label> is a pure HTML tag, no JavaScript is required. I suppose that all (major) browser support this tag, since it is very easy to implement.

A lot of developers are not using it because:

• it requires more effort (adding all the tags everywhere)
• they do not know about it existence
• they do not think it is convenient?!

But there is no reason not to use the tag. Unless you are very limited with your bandwidth, maybe?