1. Technology
Send to a Friend via Email

The HTML Label Tag - Make Your Forms Accessible

Specify Labels for Form Controls to Improve Your Web Forms

By

The Label Tag - What is It?

The label tag is an HTML forms tag that allows web developers to tell the browser or user-agent that text appearing on the page is actually a label for a form element. The label tag says "this content isn't just text, it's describing this textarea (or other form input element) and should be associated with it." The label tag also provides a larger clickable area for items like radio buttons, as you can click on the text that the label tag encloses as well as the radio button itself.

The Label Tag - Why Isn't It Used?

When most Web developers write HTML forms, they only use around four or five form tags:

While these form elements will create a decent form, they don't allow for a lot of creativity, design, or accessibility. They are the basic elements of forms, but they don't provide any "juice". The thing about forms is that there are many more form tags than most forms use. One of my favorites is the label tag.

The label tag is usually not used because people forget about it. But it adds so many benefits without a lot of extra development work.

Benefits of the Label Tag

  • Make your forms accessible to screen readers
    Without the label tag, many forms are just read by the user-agent as a series of items, such as "first name, last name, email address, phone number". Followed by a list of text input boxes that are read as "input box firstname, input box lastname, input box email, input box phone". With the label tag, the user-agent knows that the text "First Name" belongs with the input box for that entry, and so it will read the label correctly along with the input text box.
  • Make your forms easy to click on
    Radio buttons and check boxes can often be a challenge to click on for people who have less defined motor skills. The label tag makes the text label for the radio button or check box clickable as well. The label makes the text describing the radio button or checkbox clickable as well. Personally, I don't have a problem with motor skills, but I appreciate forms that use labels around radio buttons and checkboxes, as that makes them so much easier to use.
  • Give your CSS more to hold on to
    The label tag is an inline tag, so it can act like the span tag for anchoring CSS styles. For example, if you put a border around your labels, and then include your form tags inside your label tags, the form field and it's label will have a border surrounding it. For example:
    <form action="#">
    <label style="border: 1px solid #000;" for="checkme">
    Check Me Out!
    <input type="checkbox" id="checkme" value="check me" />
    </label>
    </form>

See some HTML Label Tag Examples to get a better idea of how the label tag works.

Use the Label Tag

To use the label tag, simply surround the text that you want associated with a form field with the label tag. If you don't include the form field inside the label tag, then you should use the for attribute to associate it with the id of the form element you want to label.

<label>Form ID 1
<input type="text" id="formID1" />
</label>

or

<label for="formID2">Form ID 2</label>
<input type="text" id="formID2" />

This article is part of the HTML Forms Tutorial

©2014 About.com. All rights reserved.