5 ms·

IMHO, the single-most underused HTML attribute. I get annoyed when I have to aim for the tiny box, instead of the nice long string of text next to it. Although,

IMHO, the single-most underused HTML attribute. I get annoyed when I have to aim for the tiny box, instead of the nice long string of text next to it. Although, I can't count the number of times I was guilty of omitting it many moons ago.

jancsika 8y ago
Isn't it better to nest the checkbox inside the label? Then you don't need the for attribute nor an id.
- thristian 8y ago
  That works nicely for checkboxes, but sometimes you want the form field and label to be in (say) different cells of a table row or something.
- jalbertbowden 8y ago
  labels should always be to the right of the checkbox/radio controls. never nest them. nesting is ok for other form controls in some instances, but you'll run into issues with various screen readers if you apply the for attribute while nesting. on that note, always nest when possible; the ux benefits make it crazy not to take advantage of it.
  - forgotmypw 8y ago
    Is there a reason to not nest the checkbox inside the label? I have always put them next to the checkbox until very recently, when I was trying to increase clickable area. I've found it ends up working much better than putting it beside, covering the area around the checkbox, too! Is this "improper HTML"?
- forgotmypw 8y ago
  You still have to do the complementary for= and id=, but I am also a proponent of nesting, though I have not solicited public opinion on it until just now. Here is how I started doing it: <label for=abc><input type=checkbox id=abc ...> display alphabet<label>
  - stephenr 8y ago
    What do you mean by “have to”? The whole point of nesting is that the association is implicit.
forgotmypw 8y ago
I'm not sure how "proper" this is, but you can also put the checkbox inside the label, turning the whole thing into one big clickable area. <label style="padding:5pt"><input type=checkbox> this is label</label>

jancsika 8y ago

Isn't it better to nest the checkbox inside the label? Then you don't need the for attribute nor an id.

thristian 8y ago
That works nicely for checkboxes, but sometimes you want the form field and label to be in (say) different cells of a table row or something.
jalbertbowden 8y ago
labels should always be to the right of the checkbox/radio controls. never nest them. nesting is ok for other form controls in some instances, but you'll run into issues with various screen readers if you apply the for attribute while nesting. on that note, always nest when possible; the ux benefits make it crazy not to take advantage of it.
- forgotmypw 8y ago
  Is there a reason to not nest the checkbox inside the label? I have always put them next to the checkbox until very recently, when I was trying to increase clickable area. I've found it ends up working much better than putting it beside, covering the area around the checkbox, too! Is this "improper HTML"?
forgotmypw 8y ago
You still have to do the complementary for= and id=, but I am also a proponent of nesting, though I have not solicited public opinion on it until just now. Here is how I started doing it: <label for=abc><input type=checkbox id=abc ...> display alphabet<label>
- stephenr 8y ago
  What do you mean by “have to”? The whole point of nesting is that the association is implicit.

forgotmypw 8y ago

I'm not sure how "proper" this is, but you can also put the checkbox inside the label, turning the whole thing into one big clickable area. <label style="padding:5pt"><input type=checkbox> this is label</label>