HTML Forms - Labels

As we learnt back in the HTML Forms — Basics chapter, forms are a pervasive part of the modern-day web, and obviously so are form controls — the most important aspect of forms.

There are many different kinds of form controls: text inputs, password inputs, selection menus, radio buttons, checkboxes, submit buttons, and so on.

Each kind caters to a different facet for obtaining user input — for example, password inputs are meant for passwords, submit buttons are meant to submit forms, and so on.

Now while form controls are an important aspect of all sorts of forms in HTML, labels are the same thing for form controls.

For example, consider the following illustration of a text input for obtaining the user's name.

Notice the text reading 'Name' above the input control. This is a label for the input control. It clearly suggests the purpose of the input field, that is, it's meant to obtain the user's name.

The illustration below depicts labels for a couple other form controls:

As we know, the majority of form controls by themselves don't convey this important information in the HTML — a radio button doesn't specify what it represents; a checkbox doesn't specify what it represents when it's checked; a text input doesn't represent what it's asking for, and so on.

For this very reason, it's utmost important to have a label text for each and every control in a form.

Why again? Because form controls (most of them) themselves don't specify their purpose in a given form; this has to be done by explicitly labeling them using some kind of text.

Now, in the previous chapters, recall that we used the <p> element in certain instances to hold onto this label text for different form controls.

Below shown is an example from a previous chapter:

<form>
   <p>Name</p>
   <input type="text" name="name">
</form>

Know that this is NOT the recommended approach for labeling form controls.

<form>
   <p>Name</p> <!--Not the recommended way for labeling the input-->
   <input type="text" name="name">
</form>

As a matter of fact, it is NOT recommended to use any other element besides what we'll cover up next in the following discussion to label a form control — not a <p>, not a <div>, simply nothing.

We used <p> uptil now because we didn't explore the standard way for labeling form controls. But in this chapter, we shall unravel this standard way.

It is to use the <label> element.

In HTML, the <label> element is meant to label form controls. It's the standard and recommended way of doing so.

<label> is a container element that contains the label text. However, note that, besides text, it can contain other HTML elements (for e.g. <p>, <div>, <strong>, <em>, <sup>, etc.) as well.

We get two benefits when we use <label> for labeling form controls:

• Clicking on the <label> element activates the corresponding, labeled form control.
• <label> improves the accessibility of a form.

Let's explore each of these in detail, starting with the first one.

Activates the form control

What happens when we click on a text input control? It gets focused (speaking formally, it gets activated) — the cursor shows up inside the input field indicating that text can be entered into it.

If we label this text input using <label>, clicking on the <label> element will produce the same effect — it will activate the text input.

Improves accessibility of the form

When screen readers encounter a form control, they read out its corresponding label text.

In this case, they can only make the association between a form control and its label text when it is given via <label>; as we learnt before, <p>, or any other element, won't be of help here.

Therefore, we say that using <label> increases the accessibility of a form. Without <label>, a screen reader can't effortlessly find something to read out for explaining the purpose of a form control to the user.

With this out of the way, let's now see how to use <label>.

Using the <label> element is quite easy — we figure out an appropriate label text for a form control and then put that inside <label>.

The only additional task we need to do is to associate the label with the form control. There are two ways to do so. The following discussion expands upon both of these, while laying out an example for each.

Explicitly labeling using for

The <label> element can be provided a for attribute containing the ID (given by the id attribute) of the form control element that it labels.

Consider the following code:

<form>
   <label for="name">Name</label>
   <input type="text" name="name" id="name">
</form>

The text input is meant to obtain the user's name, hence the label 'Name' above it. This label is annotated by the <label> element, with its for attribute pointing to the <input> element it labels. The value of for comes directly from the value of the id attribute of the <input>.

Thanks to the for attribute on <label>, the browser is able to associate the <label> with the following <input> element.

Live Example

Open the link above and click on the 'Name' text — you'll notice the text input receiving focus, courtesy of the <label> element.

Let's consider another example, this time of labeling a radio button:

<form>
   <p>Gender</p>

   <input type="radio" name="gender" value="male" id="male">
   <label for="male">Male</label>
   
   <input type="radio" name="gender" value="female" id="female">
   <label for="female">Female</label>
   
   <input type="radio" name="gender" value="other" id="other">
   <label for="other">Other</label>
</form>

There are many important things to note here.

Firstly, we have the text 'Gender' marked up by a <p> element. Didn't we just say that we shouldn't use <p> for labeling form controls? Well, yes that is true and applies here as well. The thing is that the <p> element doesn't label any form control; it just describes the following set of radio buttons.

So, before anything else, this example demonstrates that we can use <p> for labeling stuff in a form if the label doesn't apply to a particular form control.

Coming back to the code above, there are three radio buttons, each labeled using its own <label> element, associated with the help of the radio button's id and the <label>'s for attribute.

Live Example

As before, open the link above and click on each of the individual label texts — doing so will activate the corresponding radio button.

What do you say? Simple?

Implicitly labeling

Although using <label> with the for attribute isn't really difficult, it requires us to additionally have an id on the desired form control element. We can skip this if we use the <label> in a way that the form control becomes a part of the <label>.

What does this mean? Let's find out.

Say we want to rewrite the following code to leverage the <label> element without the need to have for on it or have id on the <input> element:

<form>
   <label for="name">Name</label>
   <input type="text" name="name" id="name">
</form>

This requires us to nest the <input> inside the <label>. Something as follows:

<form>
   <label>Name <input type="text" name="name"></label>
</form>

Here's how the browser associates the <input> with the label text: It finds the first form control element inside the <label> and ties it with the entire text that's part of the <label>.

Pretty basic.

In the following example, we rewrite the more complex radio button code above to use <label> in this way:

<form>
   <p>Gender</p>

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

   <label><input type="radio" name="gender" value="female"> Female</label>
   
   <label><input type="radio" name="gender" value="other"> Other</label>
</form>

The result is the exact same as before:

Live Example

And now let's address the question: Which one of these two styles should we use?