Small annoyances on the web: Checkboxes without a label

I’m quite regularly surprised by websites all over the internet. Not just by crappy websites. Also beautiful, well designed websites. From big companies.

The surprise (and annoyance at the same time) is this: Their sites and web apps have checkboxes, with an explanatory line of text next to the checkbox, but you can’t click that text to toggle the checkbox. Instead of you have to move the mouse cursor to the much smaller checkbox and click.

I can’t think of a nefarious reason why web developers or companies would want to force you to click the checkbox. And one mustn’t attribute to malice what can be explained by stupidity… So could it be that many web developers don’t know it’s not only possible, but also trivial, to make that checkbox-text clickable?

Like so:

<label>
    <input type="checkbox" name="ok" />
    I condone the use of this checkbox
</label>

Or using the “for” and “id” attributes:

<input id="ok" type="checkbox" name="ok" />
<label for="ok">I condone the use of this checkbox</label>

Both will look and work like this:

I condone the use of this checkbox

The question remains: Why are we forced to click those small checkboxes so often? Please leave your theory in the comments!