Label – the secret element

Most web sites I look at seem to have no idea how to create structured and valid layout when it comes to form elements. One of the things I get most annoyed at, both as a coder and a normal user, is when they’ve missed out on the wonderful and easy label element.

The label element is used together with form elements and it makes it accessible to screen readers, while also making the text clickable to set focus to the element in question. Point in question:

You have a radio button, but since they’re pretty small, it might be difficult to click it. You then add a label around the text next to it and make it reference the desired radio button: Voíla! You can now click the text as well to make a selection.

A simple example:


	<input type="radio" id="gender-male" name="gender">
	<label for="gender-male">Male</label>

However, the example above demands that you know the id of the radio button. If you have dynamically generated forms meaning a moving number of elements, you need to do some trickery to generate dynamic ids and then have the same value for their respective label element.

There is one way around this, but unfortunately it doesn’t work in Internet Explorer. I do showcase it below, though, just so you’re aware of it.


	<label>
		<input type="radio" name="gender"> Male
	</label>

 

You thought this was all funky and want to know more about improving your form coding, but you have no idea where to go? Fear not, take a look at
10 Tips To A Better Form

21 Comments

  • Pid says:

    I've often wondered why the default style for labels doesn't cause the mouse cursor to change to a pointer/hand.

    (You left a " in the opening tag of the label element in the second example.)

  • Robert Nyman says:

    Pid,

    Ah, thank you. Fixed.

    I think it isn't the default style because it isn't a link, i.e. it doesn't lead anywhere. Then again, one can argue if people understand if something's clickable if the cursor is only an arrow…

  • Rowan Lewis says:

    I try and give all interactive elements other than text inputs the pointer cursor, it makes things just that clearer to the user. However, that's still no excuse to use a visual guide of some sort to help the user.

  • Krug says:

    So do I. It's just much easier for users to realize that something is clickable, as most web sites still don't use the label tag. (Maybe there should be a third kind of pointer, something in between a link hand and the "normal" arrow.)

    Robert: Is the section option valid? If yes, I'm exclusively going to use it. Just to make IE users angry. 🙂

  • Jules says:

    This highlights one of the weaknesses I have found in Dreamweaver 8: although, by default, the Input Tag Accessibility Dialog box pops up each time you insert an tag and it provides you options for the tag, unfortunately, the options are only Wrap tag around form input (may not be an exact quote of the text) and Use the for attribute. It is unfortunate that both options may not be selected at the same time but I have submitted this item as an enhancement request to MacrAdobia.

  • Jules says:

    Darn, got bit by the remove-HTML-from-the-comment parser again.

    This highlights one of the weaknesses I have found in Dreamweaver 8: although, by default, the Input Tag Accessibility Dialog box pops up each time you insert an input tag and it provides you options for the labeltag, unfortunately, the options are only Wrap tag around form input (may not be an exact quote of the text) and Use the for attribute. It is unfortunate that both options may not be selected at the same time but I have submitted this item as an enhancement request to MacrAdobia.

  • Jules says:

    Sorry again, should be Wrap label tag around form input.

    Sorry Robert for messing up your comments.

  • Robert Nyman says:

    Rowan, Sacha,

    Yes, I also tend to do that with a pointer cursor. However, is it the correct approach?

    Sacha,

    Yes, the second option is valid.

    Jules,

    It's ok! 🙂

    Unfortunate to hear that it is like that in Dreamweaver.

  • Jules says:

    Regarding Dreamweaver, it is quite easy, if you are comfortable with the Code view, to insert the for attribute of the label tag: the Code view supports the for attribute but the dialog box only provides one or the other option.

    I teach my readers to use the Code view and I do mention that IE doesn't support just the label tag as a clickable label unless the label wraps the input and the for attribute is used.

  • trovster says:

    In the WCAG 2.0 working draft it mentions that you should define labels EXPLICITLY, and the implicit (wrapping the input within the label) has be deprecated.

    I would always suggest to do so too. There is no reason to use them to wrap the input.

  • trovster says:

    Jules: IE supports label element as clickable if the for attribute is supplied, regardless of whether it's wrapped around an input.

    Commendable that you're teaching them code view, it's more than most places!

  • Robert Nyman says:

    trovster,

    Thanks, I wasn't aware of that in WCAG 2.0. I generally agree with you, but I just think people use the wrapping approach when it comes to very large forms with a lot elements, and they think it's a hassle to create a lot of dynamic IDs.

  • Jules says:

    Trovster: Regarding label, the for attribute and IE, you are correct, my memory slipped up but in my books, I have it correct.

    As much as I appreciate the ease with which to create code or edit content in <abbr title="Dreamweaver">DW</abbr>, I am a coder from the beginning and I don't believe that a student Web designer/developer can become a good one without learning and working with the code and for that reason, I don't shy away from code in my books.

  • I'm not so sure about changing the cursor to a pointer when it's above a label. That doesn't happen in desktop applications (at least not in Mac OS X or Windows), so why should it be that way in web forms?

  • Robert Nyman says:

    Roger,

    Well, I guess that anything that can be clickable in a web page (except for buttons) usually have got a pointer cursor, so that's what people have gotten used too; therefore I think it's ok to use it.

    However, if it's the correct thing to do or not, I'm not sure.

  • Karen says:

    I tried the suggestion of wrapping the entire input with label and using for, but the code did not produce an entire clickable label for IE.

    However, I should point out I'm using img, not text for the label. When I replace image with plain text, the entire label is clickable.

  • Robert Nyman says:

    Karen,

    Interesting to hear. Labels and wrapping doesn't seem to be a sure approach in IE.

  • […] this is something new to you, I’d recommend that you first read Label – the secret element. What I wanted to touch on here is the semantic value on how you use the label element together […]

  • adrien says:

    hey i have a question for you .. i've been working on styling a form & labels with CSS< but traditional style rrules don't really seem to apply to forms, at least for me when i try changing up the color, and add a background collor for example, it shows up in the design view of dreamweaver, but when i export to browser it just reverts .. what am i missing? i appreciate any feedback i can get, preferably at my email address info@freestylemovement.com

    thank you!

  • Robert Nyman says:

    adrien,

    To simplify: not all web browsers and platforms support form styling, or to a lesser extent, so it usually not a good path to take.

Leave a Reply

Your email address will not be published. Required fields are marked *