

Don't Be Lazy, Use HTML Labels Correctly - sherm8n
http://blog.goodsense.io/2012/12/07/dont-be-lazy-use-html-labels-correctly/

======
eurleif
Whatever you do, don't make clicking the label do something other than
check/uncheck the box, like how Xfinity's boneheaded login page brings up a
'help' screen when you click on 'Keep me signed in':
<https://login.comcast.net/login>

~~~
AgentConundrum
Also, when that help screen appears, everything else on the page darkens out
_except_ the CAPTCHA (presumably because it's done in flash). It probably
leaves some users confused about what the dancing text has to do with the help
page, and what they are supposed to do with it in that context.

~~~
3825
also why does the tooltip say the same thing as the link itself?

<http://i.imgur.com/fdkpt.png>

------
elchief
<label><input type="checkbox"/>Stuff</label>

is easier.

~~~
thomas-st
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.

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

~~~
highwind
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.

------
cynwoody
You don't have to link the label to the form element via ID. It's simpler to
nest the element within the label.

~~~
nowarninglabel
You may argue that it's simpler (I'd argue it's not), but either way nesting
elements inside labels usually breaks assistive technology:
<http://www.w3.org/TR/WCAG20-TECHS/F68.html>

That's a good reason to use the format the author suggested instead of
nesting.

~~~
crazygringo
Why can't assistive technology figure out what a label with a single nested
control refers to? The browsers seem to do it just fine.

Once a website reaches a certain scale (especially with rich web apps), global
DOM id's become an almost impossible headache to deal with (because of
multiple views which duplicate id's, coordination of global names across
hundreds of files, etc.).

Global id's are basically an antipattern, whereas labels with nested controls
have always seemed pretty workable.

~~~
Too
Once a website reaches a certain scale you better have a backend that
generates your forms already.

Since input elements already have unique names/values, otherwise the backend
wouldn't know what you've posted. You can use a (scrambled) version of this,
plus a sequence number if required in case of multiple inputs with same name.

Remembering to manually insert the label for every radio input is just bound
to fail.

~~~
crazygringo
On a large-scale rich webapp, input elements _don't_ have to have unique
names, because you're not posting forms directly to the backend.

Instead, you identify your input elements with classes, use something like
jQuery to read the values from elements with certain classes from inside a
specific DOM element only (not globally), and then POST to the server using
AJAX. Nowadays, user interface elements have no need to be tightly coupled
with HTTP parameters.

ID's worked in the era of non-JavaScript. But for large dynamic sites where
JavaScript is required (webapps, etc.), I haven't used ID's anywhere for
years, thank God (like I said, an antipattern).

------
bflesch
Perhaps LinkedIn is doing this on purpose? It seems like this is a feature
they would not like to see used very much, and by A/B-testing they discovered
that people use anonymous posting way less when confronted with such a non-
standard checkbox label behavior.

I think "normal" checkbox label behavior is very much ingrained in the web
development community, thats why I suppose the developers at LinkedIn know
about it as well.

~~~
sherm8n
Perhaps, but the other options to make it not anonymous don't allow label
clicking either.

------
davedx
> I’m surprised that LinkedIn doesn’t use labels correctly.

I'm really not. My experience with LinkedIn in terms of production quality
code has been quite bad - not being able to unsubscribe from emails because of
bugs that crash the website among the most annoying one.

------
diggan
My guess is that this isn't because of lazyness but because of getting users
NOT to check something. I often find that opt-outs of social sharing, sending
statistics or something else that the application will benefit from isn't
linked to the label. Maybe because they want to make it harder to
check/uncheck?

------
zalew
I am lazy. Django forms do it for me.

------
shakeel_mohamed
I've always used nested elements within a label tag, I've been advised to do
so by people specifically concerned with HTML accessibility issues.

------
munger
Especially important when you have mobile users filling out forms.

------
hayksaakian
Let me try with embedded ruby:

<%= label_tag :is_premium, 'Toll free? (e.g. 1-888- __ _-_ __*)' % > <%=
check_box_tag :is_premium, true, params[:is_premium] %>

Am I doing it right?

------
nicholaides
I'd love to see a browser plugin that corrects this. There are so many sites
that just don't bother.

------
jplur
This is the first time I've heard of labels. A lot of us learned html from
googling and ending up on w3schools, which is not the best reference.
<http://w3fools.com/> has a good list of the erroneous info.

~~~
sherm8n
Unless you're a frontend developer, most people don't use labels. That and
fieldsets. I still don't use those.

------
psadri
At Polyvore, we wrote our own centralized form generation library which always
emits <label> with the correct behavior.

Another neat thing it does is optionally render dropdowns with fewer than 3
choices as radios -- 1 click to select vs 2.

~~~
sherm8n
That's impressive. Dealing with forms is harder than most people think. Ever
try positioning or styling input fields? It's not trivial like other html
elements. That's why wufoo is popular and bootstrap puts so much effort on
forms.

------
muan
They use labels (correctly) in almost all the forms on the site except this
one. They might have gone through the trouble to take it out on purpose.

------
chib
This really bugs me. My bank's website doesn't use them correctly!

