
Why Your Form Checkboxes Need to Have Label Tags - waterhole
http://uxmovement.com/forms/why-your-form-checkboxes-need-to-have-label-tags/
======
timdorr
This is the single most annoying thing I find web devs doing on a regular
basis. Please use labels, web devs. It applies not only to checkboxes but any
type of input. It's a free, easy usability improvement. It even makes it
easier to style the text with CSS since it's wrapped in a specific tag!

~~~
masklinn
> It even makes it easier to style the text with CSS since it's wrapped in a
> specific tag!

Labels don't have to wrap inputs. In fact, mine almost never do, that's too
much of a pain to align. They're usually linked to their input via @for (and
at some point in the future, I'll be able to do that with inputs and forms via
@form, what a glorious day that will be)

~~~
freakwit
I think in this case "the text" refers to the label's text, not the text in
the input that the label is @for.

~~~
masklinn
Oh ok, missed that. Sorry.

------
51Cards
When I evaluate a portfolio attached to a resume this one of the first things
I check for of there is a form in the portfolio. If the developer hasn't done
it that is a big strike right there.

I was on a site the other day, I can't remember where but it was "Fortune 500"
level stuff and they didn't have checkbox labels. It amazes me how much this
gets missed.

------
pkamb
As "theoatmeal" says: "Use a label tags with these; that way I don't have to
be a goddamn marine scout sniper to sharpshoot the tiny little box. It's 2011
and 90% of the websites I use still haven't figured this out."

Nice little usability rant: <http://theoatmeal.com/comics/shopping_cart>

------
theone
Irony is that, we are discussing use of label tag, on the website(news.yc)
which also doesn't have it(label tag).

Example:

\- Search Box Below

\- <http://news.ycombinator.com/submit>

~~~
tnorthcutt
The real irony is that the comment submit form on the site where this was
posted doesn't use a label tag. Hopefully he'll fix that or get in touch with
me and let me help (I offered to help - apparently it's a WordPress plugin
that doesn't have the label element).

------
bilban
The post reminded me of a time where we had a form that exhibited odd
behaviour. When selecting a check box by clicking the label - the page would
change. It turned out that the id of the navigation link matched the check box
that was referred from the label!

------
ars
He used an image for some reason for the text, so I can't copy/paste the code
and edit it.

But there is no need to always use id="xx" in the input and for="xx" in the
label. The majority of the time you can just wrap the label tag around the
input tag. It works great and is very fast to do.

i.e.:

    
    
      <LABEL><INPUT type="checkbox" name="foo">Include bar?</LABEL>
    

Not:

    
    
      <INPUT type="checkbox" name="foo" id="foo"><LABEL for="foo">Include bar?</LABEL>
    

The only time to use the id/for method is if the elements are not near each
other. By far the most common is when they are in separate table cells.

~~~
true_religion
It's very late, so forgive me for impertenence.

But the "fast" thing to do is to add the long form declaration of the label
into your templating function library.

In the future it would be much quicker to write something like: print
checkbox('foo')

And get the 'fool proof': <INPUT type="checkbox" name="foo" id="foo"><LABEL
for="foo">Include bar?</LABEL>

as output.

~~~
ars
Hardly fool proof since there are many legal names that are not legal IDs.

Also names can repeat, either within the same form (radio boxes for example,
but other elements too), or in different forms. IDs cannot, and must be
unique.

------
cheald
I'm generally not too terribly much of a stickler for accessibility, but a
thousand times, yes. Unclickable labels are a GIANT pet peeve of mine, both as
a user and a developer.

~~~
pkamb
What's great about "accessibility problems" is that they're usually huge
annoyances for everyone else too. Curb cuts are essential for bicyclists,
closed captioning at sports bars, etc.

------
bilban
It's also frustrating for users that have js disabled in their browsers, that
can't comment on a blog post! At least notify the user before hand! Plus the
labels on the comment form are after the input fields - and the fields are
inline, which makes the form hard to comprehend!

~~~
tomjen3
Honestly I don't see a reason to do special handling of people who disable
javascript in their browsers these days.

Almost all of them are bots anyway.

~~~
pavel_lishin
"I don't see a reason to do special handling of people who disable javascript
in their browsers these days."

Ironically enough, blind people who use screen readers might see a very good
reason.

~~~
tomjen3
Non JS users are statistically more likely to be bots than blind, so I don't
see why that should matter.

And anyway JAWS use IE to read the page for the user, so it does support
javascript.

~~~
bilban
I happen to prefer the web in the main with JS turned off. I may be in a
minority here, but surely it's not much effort to design with graceful
degradation in mind?

------
mnazim
Seriously guys! A post about "labels for checkboxes" on the HN frontpage. In
2011.

No wonder people are complaining so much about HN.

Edit: Down votes? For trying to remind the community about the high quality of
content and discussions on HN 2 years ago. OK.

~~~
joshfraser
Because it's a widespread problem across the web. Even from startups that read
hacker news!

~~~
mnazim
If this problem exists on some app which you [pay to]use daily, wouldn't it be
better if you just dropped an email to them instead of discussing it here.

------
tiddchristopher
There's a form I recall using multiple times that has labels for everything
but a single checkbox: the box which, it so happens, defaults to "yes" for the
installation of a piece of bloatware. I'm fairly sure it's in the Java
installer. The practice disgusts me.

------
ojbyrne
The word that comes to mind is "obv."

~~~
mbreese
Obvious, yes. But I'm still amazed at how many people still don't use label
tags. It's incredibly frustrating to not be able to click on a label, and I
run into forms everyday that have this issue. What's even more frustrating is
that there is such a simple solution. The only explanation is that people
aren't aware of the existence of the label tag. So posts like this one are a
good method to 'increase awareness'.

~~~
Maxious
I don't know if it is obvious. I've been starting to use label tags for
textboxes and didn't realise that value= wasn't good enough. Instead I had a
label and a value= attribute that had a bit more information to help users...
guess I'll move that to the label now.

------
tomjen3
And while we are at it, please enclose the form in a fieldset tag.

It is so much easier to read and understand.

