Html –

htmllabelusability

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

Best Solution

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