Hacker News Reader

Comment by stronglikedan | Hacker News Reader

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.

View on HN

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>

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

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.

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.

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

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>

What do you mean by “have to”? The whole point of nesting is that the association is implicit.

Reply on news.ycombinator.com