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. Are there any compatibility/functionality/usability issues with using <label> that would discourage developers from using this tag?

Even Stack Overflow seems guilty of this, e.g., when asking a question, the Notify daily of any new answers checkbox label is not clickable.

If I remember correctly, `` was introduced in HTML 4, well after HTML forms came about. So it's not used mainly because the *tradition* (learning from view-source) doesn't include it, and it's not necessary for proper visual appearance and ordinary functionality (clickable checkboxes). — Kevin Reid, Feb 13 '10 at 14:32

score 32 · Accepted Answer · edited Jan 14 '14 at 20:32

32

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 :)

edited Jan 14 '14 at 20:32

Maksim Vi.

9,107
12
59
85

answered Feb 13 '10 at 13:14

Ray

21,485
5
48
64

1

oops - though the checkboxes on the profile preferences page do have labels – Ray Feb 13 '10 at 14:31
1

Yeah, it is inconsistent throughout the site. – D'Arcy Rittich Feb 16 '10 at 20:04

score 8 · Answer 2 · answered Feb 13 '10 at 13:20

8

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.

answered Feb 13 '10 at 13:20

Sarfraz

377,238
77
533
578

2

+1 for mobile importance. And nice link, thanks. If you go to their signup page, you'll notice they did not use `` tags. :) – D'Arcy Rittich Feb 13 '10 at 13:33
@OrbMan: that's why i put up +1 for great question you have asked and guess what even though i have answered it, i myself never cared about it. :) – Sarfraz Feb 13 '10 at 13:43
Just like proper tab order (or even tab-ability at all), hotkeys and general ability to do things with the keyboard are slowly but surely disappearing from software... – Roman Starkov Mar 03 '11 at 11:58

score 3 · Answer 3 · edited Dec 20 '13 at 16:52

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>

edited Dec 20 '13 at 16:52

juan.facorro

9,791
2
33
41

answered May 24 '12 at 21:08

Isurus

31
1

2

you don't need for and id at all if you wrap the input tag in the label – George Birbilis Jul 27 '14 at 13:09

score 3 · Answer 4 · answered Feb 13 '10 at 14:12

3

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.

answered Feb 13 '10 at 14:12

Paul D. Waite

96,640
56
199
270

1

Form controls don't need an ID: Here's a label – Bennett McElwee Feb 14 '10 at 20:44
1

I think I have seen browsers that won’t implement the click-label-to-select-form-field without the `id` attribute. And occasionally, for layout reasons, you don’t want your form field inside your `` tag. (Not often though.) – Paul D. Waite Feb 14 '10 at 21:14

Veger · Answer 5 · 2010-05-10T07:41:49.160

1

<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?

edited May 10 '10 at 07:41

answered Feb 13 '10 at 13:15

Veger

37,240
11
105
116

I think the bandwidth comment would only apply to a handful of the most popular sites, e.g. Google. – alex May 10 '10 at 01:00
I totally agree, but this was the only reason I could think of why one would not use the `` tag. – Veger May 10 '10 at 07:54
@alex: it's true, Google does not use the `` tag, I just went into my account settings and checked. I find that really odd. – D'Arcy Rittich May 10 '10 at 14:03
@OrbMan Google uses `` tags, and it's by design (according to Matt Cutt's blog). Being Google, they need to save precious bytes. – alex May 10 '10 at 14:10

Making checkbox and radio labels clickable

5 Answers5

Linked