I’m sure you’ve filled out a form on a website and at some point gotten a message about not completing a required field, only to find that one of the boxes you thought you clicked on never received your click. Sure you probably clicked close to the button or box when you filled out the form, but when it comes to clicking, close doesn’t count. So then you went back over the whole form and made sure that the checkbox or radio button was properly clicked. The thing is, if the person who designed the form was aware of the mysterious <label> tag, then odds are you never would have had to go back and correct the mistake in the first place.
The <label> Tag
The label tag makes completing forms easier. The only point of the label tag is to provide a usability improvement for mouse users. According to the W3C: “Some form controls automatically have labels associated with them (press buttons) while most do not (text fields, checkboxes and radio buttons, and menus). The LABEL element is used to specify labels for controls that do not have implicit labels”.
So what does the label tag do for us? Basically it allows you to extend the clickable area for most form elements. For example, instead of having to click on a radio button, you can click the button or some text that’s been enclosed in a label tag. While a typical radio button might appear like:
<input name=“option1” type=“radio” /> Click here to select option 1
The same button with a label could look like either:
<label><input name=“option1” type=“radio” /> Click here to select option 1</label>
or
<input name=“option1” type=“radio” id=“option1” /> <label for=”option1”>Click here to select option 1</label>
Notice the differences between these two examples. In the first example, the input element and associated text have been wrapped within a label tag (implicitly associated). This is the easiest way to use the label tag; however in some cases the text you want to associate with a form element may not be adjacent to it. This is where the second example comes in handy. Here, the associated text is wrapped by the label tag, and the label tag has a “for” attribute which specifies the id of the element to associate the label’s contents with (explicitly associated). In this case, we use the id attribute of the input element “option1” in our label’s for attribute. The end result is identical from the user’s perspective. Labels also allow you to target the text of form elements so that you can style them without any extra div or spans tags. Pretty handy.
Check out this example that shows two simple forms; one without labels and one with.
If you click on the various elements on the form on the left, you’ll see the only way to make choices is to click exactly on the control, whereas on the form on the right, not only can you click on any of the form controls, but you can click on the text associated with the control. And in the table example, you can even click the space around the control (the blank areas in the table cell) which allows you to easily select the radio buttons.
Also note that labels help users that have screen readers when they access forms. Screen readers will read out the label text and then the form elements associated with it. Without label tags, most forms are just read as list of items with the text coming together (e.g. first name, last name, email address) followed by a list of form fields (e.g. input box first name, input box last name, input box email, etc). With label tags added, screen readers read the label correctly along with the input field it’s associated with.
While the label tag is nothing new, some developers forget how beneficial they are while others don’t know they exist. So the next time you’re designing a form, remember that people don’t like to have to hit tiny targets with their mouse when they can just as easily click in the vicinity to accomplish the same goal.