Labels the forgotten HTML Form Tag

Even on big commercial sites, there's still almost no use of the label tag. I largely attribute this to the fact that most developers don't even think about them, or have never even heard of them. On the other hand, many application developers have certainly thought about how exactly to achieve some of the effects that are implicit with label tags.

As such, I feel it's my duty to get more people to start using them.

Using the <label> tag

The label tag is just another form element. The standard explanation of the label element is that a label associate text to an input field in code and markup, rather than just visually. As awkward and difficult as that might be to understand, it is in fact, a very simple tag to use:

1. Wrap the text you want to associate with <label></label>
2. Add an id attribute to the appropriate form field
3. Add the for attribute to the label tag with the id of the corresponding input field.
4. File → Save!

Simple enough, here's an example (just a simple one):

<form action="#" >
	<label for="first-name">First name: </label>
	<input type="text" name="firstname" id="first-name" />
</form>

The above code will look like this:

First name:

Before moving on, there are a couple things to note. First, by definition, you do not need to be explicit with your label (ie. use the for attribute and the id attribute), if you wrap the input and the text within the label. However, IE doesn't extend all the benefits of using a label if you choose that method.

Second, since the label uniquely identifies a form field and since the value of id must be unique, you may find yourself having problems with radio buttons and checkmarks. However, form get/post operations use the name field and not the id field. As such we can do something like this:

<form action="#" >
	<p><input type="checkbox" name="hobby" id="reading" />
	<label for="reading">reading: </label><p>
	
	<p><input type="checkbox" name="hobby" id="writing" />

	<label for="writing">writing: </label></;/p>
	
	<p><input type="checkbox" name="hobby" id="skiing" />
	<label for="skiing">skiing: </label></p>
</form>

That code will render like this:

reading

writing

skiing

Third, some inputs have implied labels. Those fields require no additional information and they include: buttons, submit buttons, and reset buttons. As such, there's no need to do any additional work, unless you want to.

Why, as web developers, we should care about the label tag

The problem as I see it, is that most people don't care about associating the text with the input in code, and would rather save the bytes and keystrokes. In fact, most developers just assume that a visual connection between an input field and describing text is sufficient. In general, that's probably true.

However, There are really three main reasons why we should care:

1. Accessibility
2. Usability
3. And label creates one more semantic container

Accessibility

508 Standards, Section 1194.22 Rule 1.1.2 says that "all input elements are required to contain the alt attribute or use a LABEL".

Simply stated, "you can't just have an input field without more associated information." And since, as lazy developers, we don't want to do more work than we have to, and since we presumably are already typing text to describe the form field visually, why not just use the label tag? How's that for a run-on sentence?

The accessibility requirement, for some, is probably sufficient enough reason, however, that largely doesn't appeal to most people. The next reason might.

Usability

Clickability!

Ever notice how little radio buttons and checkboxes are? Ever get frustrated by the fact that you have to move your mouse into a little 5px by 5px box in order to make it function correctly? Ever want to just wish you could just click the corresponding text? Ever write a Javascript to do that?

Well, one of the nicest things about the <label> tag in modern browsers is that the associated text is connected to the input and by clicking the text you either cause the checkbox/radio button to become marked or the focus is set to the input field.

Scroll back up to the examples. Click the text. In the checkboxes, you'll notice that the checks are set and unset when clicking the text. For the text field focus is set.

Using styles, it's possible to visually clue the user into the clickability:

<style type="text/css">
	label { cursor: pointer; }	
</style>

By doing that, the user will get a hand every time they mouse over the label text. They might be more apt to click the text and thus learn for future use.

Access keys

This is a bit more controversial, read Using Accesskeys, but it's understandable the there may be a good enough reason to use them. Accesskeys are simple key commands, although they vary widely by OS and browser, which allow the end-user to immediately reach a particular area, or in this case, an input.

None of the above examples use the accesskey attribute, however it's as simple as adding: accesskey="f". That will allow the user to do something like: alt-f (notice the possible conflict with the file menu) to reach the associated input field.

Like the label suggestion above, it might be possible to use CSS to set off the accesskey in a couple ways. First, if the first letter of the label is always the accesskey, you could use:

<style type="text/css">
	label:first-letter { color: #900; font-weight: bold; }	
</style>

Or, if you'd prefer, you could use some other tag, like span, to surround the particular character which would act as your accesskey:

<style type="text/css">
	label span{ color: #900; font-weight: bold; }	
</style>

On this point, the decision is left to the developer. For complex forms with more than a few fields, it doesn't make much sense. On the other hand, imagine the possibility for the search field or the login field.

One more container!

Perhaps the single most advantageous reason to use the label tag, as a developer, is that it gives you that illusive, extra, semantic container that there never seem to be enough of. That is, instead of adding spans, divs, tds, or ps, we can instead rely on the label to provide us another element with which to style.

The most obvious example of this is the CSS Side by Side form. Using the label tag, we can create the two column tabular look without tables by making the label float.

We can also use the label to supply help information and necessary context. For example, if we want to designate a particular as required we could do the following, using CSS:

<style type="text/css">
	label.required { color: #900; font-weight: bold; }	
</style>
...
<form action="#" >
	<label for="first-name" class="required">First name: </label>
	<input type="text" name="firstname" id="first-name" />

</form>

More creatively, we can also use the label to provide more insight into an input field, in a tooltip like option. Like any element, the label tag can use the title attribute. Thus, when the user is hovering over the label tag, the little tooltip box shows up. In the Clickability! section, I mentioned that we can make the cursor a hand so that it looks clickable, but what if we expanded that idea. For example, using a bit of javascript to provide more insight:

<form action="#" >
	<!-- the &#10; inserts returns in the javascript too -->

	<label for="first-name" 
		title="This field is required!&#10;
		Your first name is the first part of your given name.&#10;
		For example: John, Laura, or Jane." 
		class="required" onclick="alert(this.title);">
			First name: 
		</label>
	<input type="text" name="firstname" id="first-name" />
</form>

Now, this is not an ideal solution, but you could easily have javascript render a helpful box next to the input box that shows that helpful information. The above example looks and works like this:

First name:

It's not a terrible idea, and for some users, it's probably better than nothing.

In conclusion

Even if none of the above makes any sense to you, you should probably still use it. By default, it doesn't have any style characteristics and thus will not change your design. In addition, the time it takes to add a label tag is nominal, and if you use it under the one more container theory, you're probably reducing the amount of meaningless code you have on your page.

Now start coding!