logo

Quick Tip: Easier Way To Use Labels on Input Fields

There's no doubting that adding a Label to things like checkboxes and radio buttons is a godsend for usability.

With a Label

Here's a checkbox with a Label on the label. Click the text to the right of the check box and it toggles the field.

Nice and easy.

Without A Label

Here's a checkbox without a Label:

I'd like to receive the newsletter.

Harder to use, isn't it. There's no excuse not to use one!

Using Labels

As I've always understood it, the proper way of doing it is like this:

<input id="signup" value="yes" type="checkbox" name="signup"> <label for="signup">I'd like to receive the newsletter.</label>

Notice the Input element needs an ID and we need to pair this ID with the Label using the Label's "for" attribute. This is what has always put me off using Labels - they're a pain to implement - particularly when hand-coding lots of Inputs.

However, there's an easier way. You can do this:

<label><input value="yes" type="checkbox" name="signup"> I'd like to receive the newsletter.</label>

No need for any IDs!

This comes in handy when programmatically creating groups of checkboxes (or radio buttons) as you only need to wrap them in Label tags, rather than assigning each a unique ID, like so:

<p>
<label><input type="radio" value="Red" name="FaveColor" /> Red</label>
<br />
<label><input type="radio" value="Green" name="FaveColor" /> Green</label>
<br />
<label><input type="radio" value="Blue" name="FaveColor" /> Green</label>
</p>

Simples.

Comments

  1. Ah! Nice! Makes sense too and like you (probably) I wonder why this wasn't obvious earlier. Thanks for the revelation!

      • avatar
      • Jake Howlett
      • Wed 12 Jan 2011 08:10 AM

      I thought it made sense at first, but, the more I think about it, the more I wonder.

      I Tweeted it earlier and got shot down for suggesting the use of something with a complete lack of semantic meaning.

      While I'm all for semantically-correct markup I can't see the harm in this one.

      Show the rest of this thread

    • avatar
    • Jorge Coelho
    • Wed 12 Jan 2011 08:37 AM

    I remember picking up this tip on Dan Cederholm's (SimpleBits.com) first book. His books are a must for any web developer.

  2. Very cool, great tip!

  3. I'm just glad ExtJS remembers to do all this stuff for me, because I'd never remember. :P

    • avatar
    • Ferdy
    • Thu 13 Jan 2011 02:55 AM

    I'm with the semantic guys on this one. You're making the input a child element of a label. Conceptually this is not correct.

    I agree that in practice there is little harm to it though. The only downside of this method is that you become less flexible in repositioning elements through CSS since you have explicitly created this parent-child relationship. Any repositioning of your label will now also reposition your input. I'm sure it won't matter much in this case.

    I would never preach semantics for the sake of semantics alone, but there definitely are real world advantages to semantic markup, the most important ones being flexibility, maintainability and how well search engines and screen readers can interpret the markup. So unless there is a very strong reason for non-semantic markup, I'd go for semantic markup. I really don't see what the big win is of not having to supply "id" atributes.

    Just my 2 cents...

    1. Well, I think the win is it's easier if you hand code a lot. If you're using a framework to do this for you, it should be semantically correct out of the box without you needing to think about it.

      So, this is handy for folks like me who make a lot of web based tools just for my use or those in my immediate internal group.

      <philosophyzimigating>

      To your point, though, one could argue semantics are misconceived in the case of labels and controls. The label is the meaning, the control is meaningless outside of the context of the label. So while convention is focused on a semantic that supports a legacy hierarchy where controls are often thought of first by the developer and the label secondarily, to the user, the label is the meaning and it might be worth while to revise semantics in that direction. What meaning has a control apart from its label? One label can be applied to any number of controls and still have meaning.... but a control with no label is meaningless.

      </philosophyzimigating>

      Show the rest of this thread

  4. My preference is to use a modern Web development language like Lotus XPages. I just drag a checkbox or radio button control onto the page, specify the text for the Label and it automatically generates the code to produce the behavior described in the example. No HTML required. Now that's RADD!

      • avatar
      • Aaron
      • Thu 13 Jan 2011 09:48 AM

      Did you just call Xpages a web development language?? LOL

      • avatar
      • Michael Milo
      • Mon 11 Jul 2011 09:00 AM

      Ha ha ha. No HTML required too? Fancy, a HTML-less website, all powerd by lotus!

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Wed 12 Jan 2011

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

More Content