5 ms·
Why Your Form Checkboxes Need to Have Label Tags
- ojbyrne 15y agoThe word that comes to mind is "obv."
- mbreese 15y agoObvious, 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 15y agoI 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.
- timdorr 15y agoThis 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!
- ivanbernat 15y agoAgreed, however I think the problem lies with most tutorials out there which don't follow this logic and newbie devs just follow this path without thinking about it.
- masklinn 15y ago> 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)
- ajtaylor 15y agoI have used labels in the past for radio buttons and checkboxes, but had never considered them before for input-type elements. It's a brilliant idea, and so easy to implement too!
- tiddchristopher 15y agoThere'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.
- 51Cards 15y agoWhen 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.
- bilban 15y agoIt'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 15y agoHonestly 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 15y ago"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 15y agoNon 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 15y agoI 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?
- bilban 15y agoThe 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 15y agoHe 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.
- masklinn 15y ago> 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. Actually the majority of the time you do not do that, as it's a pain in the ass to correctly style for alignment. Even more so in a cross-browser fashion. Splitting them provides far more stylistic flexibility, and is — I think — more correct semantically. It also makes for much simpler scripting, as you just need to dereference @for when handling a proxied action from the label to the input, if you have mixed situations you need to handle both, and the first case requires a filtered traversal of the label's children. (the piece had numerous other failings I find more problematic than this: no names on controls, crummy and non-informative ids, and the UX of the blog itself which you mentioned: code as a picture instead of as text)
- ars 15y agoI've been doing this for years and have never had the slightest alignment issue. Example? Or do you mean if the label and input are in different columns of a table - in that case, obviously split them. I'm talking when they are near each other. And I totally disagree about the semantics. Wrapping the label is much more correct semantically - it says this input and these words are related. I do not understand what you mean by "simpler scripting". Are you trying to make a special script action when they click the words? I wouldn't do that - make the action on the input element.
- codingthebeach 15y ago
- cheald 15y agoI'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 15y agoWhat'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.
- mnazim 15y agoSeriously 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 15y agoBecause it's a widespread problem across the web. Even from startups that read hacker news!
- mnazim 15y agoIf 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.
- pavel_lishin 15y agoPlease don't whine about downvotes. Especially considering that your comment isn't grayed out at all right now.
- tomjen3 15y agoAnd while we are at it, please enclose the form in a fieldset tag. It is so much easier to read and understand.
- theone 15y agoIrony 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 http://news.ycombinator.com/submit
- tnorthcutt 15y agoThe 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).
- rsoto 15y agoI think there are bigger issues to fix on HN: - Everything is a table - <FONT> everywhere - URLs on self-posts doesn't convert into a link - Un-upvote/downvote
- pkamb 15y agoAs "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 http://theoatmeal.com/comics/shopping_cart