Hacker News Reader

Comment by thomas-st | Hacker News Reader

Not only is it easier and doesn't require the use of an ID, it also allows you to click in the space between the checkbox and the label text.

View on HN

Came here to post this. This is very important and as a bonus, if you add some padding to the label the click area around the actual radio button becomes a bit larger.

You can combine nesting with for="id" to make sure you get complete compatibility.

I'm not sure about more recent versions of Safari, but I know this used to be the only way to get safari react to clicks on the label text.

I always remembered this as being "invalid" HTML, but a quick Google search turns up nothing. Can anybody shed some light?

Are you thinking Improperly nesting elements?

    <i>Some <b>text</i> here</b>

In that case, the label tag surrounding the input tag doesn't violate this rule.

It's not invalid; it's one of the two ways of using a label element. However, IE 6 didn't support it which is why I always resorted to the ID variant. The difference in typing isn't that large anyway.

Reply on news.ycombinator.com