HTML: label, no more "for" for me!

2017-04-13 22:44  htmllabelfor      [permalink]

If only I had known sooner! I forgot where I picked this up, but apparently if you put <label> around an <input>, typically of type checkbox or radio, browsers automatically know the label is for that control. Before, I would write my <input id="x"> first, then a <label for="x"> after. To keep code neat, I would put it on a separate line, but the EOL inbetween would not be clickable to actuate the control. This is a really minor issue, but still. Now that I know you can just write this:

<label><input type="checkbox" name="Toggle1" value="1" checked="1" /> Toggle1: clicking text after a checkbox should toggle the checkbox!</label>

Because, there are two kinds of people: those that click the box to switch a checkbox, and those that click the text right of the checbox. You might not even know that you do, but you do don't you. If you're of the latter type, it's just one of those minor frustrations, that a click on the text-label sometimes doesn't do what you expect, and you have to:

1. first pick up that's this that's going on, possible because you've selected a bit of the text
2. align your eyes to the checkbox
3. align the mouse-cursor over the checkbox
4. click the checkbox, confirming the previous one or more click are actually wasted

But there you have it. Heaven has great UX. Here we need to make do with what we get. (And need to make sure it's the way we like it for those bits that we have control over.)

→