<label> on checkboxes: is there a reason why more websites don't use it?

Question

I always try to do the following:

<label><input type="checkbox" /> Some text</label>

or

<label for="idOfField"><input type="checkbox" id="idOfField" /> Some text</label>

My question is related to the label tag, specifically on a checkbox.

Most websites (I would say >40%) don't use the <label> tag.

Is there a reason for this? Is there a problem in a browser or some other issue?

Note: Incase people don't know about the <label> tag, it has a number of advantages:

• checkboxes & radios: you can click on the text as well as the checkbox to check the checkbox (as well as focus I believe): Blah blah blah
• other inputs: if you click the text, it will focus the input (textarea, text, file) (this functionality isn't as useful as checkboxes & radios)

Note 2: Some people have mentioned that example #2 is more correct than #1 (above), but according to the documentation here, either is correct

Answer 1

I think it's probably more a factor that people don't know about the <label> tag. I didn't, until this post.

Answer 2

The developer working on the site didn't know the <label> tag existed.

Answer 3

I agree that label is often an unknown tag. I use it in the form

<label for="chk1">Some text</label><input id="chk1" type="checkbox"/>

The for attribute let the user click on the label also to select the checkbox with the corresponding id (not name) and not being annidate I can better control the layout with CSS.

I will try your solution, though

Answer 4

Most web sites were made by people who only do what it takes to get the site to work like they think it should. Process flow is:

1. Take a stab at it.
2. Load it in browser, and see what's wrong.
3. Search google for the fixes.
4. Repeat.

Since most of these people never try to focus any inputs without using the mouse, the problem never becomes evident.

Answer 5

Some older browsers don't interpret the for attribute, and instead require the form element to be nested within the label tag.

Answer 6

Because it's an underhyped tag that should get more attention. While you're at it (improving accessibility), don't forget the tabindex property.

Answer 7

The advantages are obvious but I don't think most know about it because label seems to convey nothing concrete. You can obviously see the advantage of using a strong tag because it makes the text look bold but label tag? You wouldn't notice anything different.

Answer 8

There is no downside to using <label> that I know of. I 've used it a lot in the past few years.

There are actually 3 ways you can set a label, the first two correspond with the ones you gave in your question:

<label for="xa">XA: <input type="text" id="xa" /></label><br />
<label for="xb">XB:</label> <input type="text" id="xb" /><br />
<label>XC: <input type="text" id="xc" /></label>

All 3 of the above work in FF3 and IE7. I remember that for some reason I mentally marked the last two as "to be avoided, only partially work" though. Therefore I 'd bet good money that only the first one works in IE6.

To clarify: the "best" way to do it is my example #1, your example #2.