HTML Form Labels

Understanding Form Labels

The HTML <label> element provides a text description that identifies the purpose of a form control.

Labels help users understand what information a form expects and are especially important for accessibility. A properly associated label connects its descriptive text to an input, select menu, text area, or other labelable form control.

The <label> Element

The <label> element provides a caption or description for a form control. The label text should clearly describe the information the user should enter or the choice the control represents.

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

In this example, the label tells the user that the text field is intended for a name.

Connecting Labels with Form Controls

A label can be explicitly connected to a form control by giving the control an id and using the same value in the label's for attribute.

<label for="email">Email:</label>
<input type="email" id="email" name="user_email">

The values must match exactly. Here, for="email" identifies the control with id="email".

The name attribute serves a different purpose. It identifies the value when form data is submitted and does not create the label association.

Explicit Labels

An explicit label uses the for attribute to reference the id of its associated form control. This keeps the label and control as separate elements while maintaining their relationship.

<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="user_phone">

Explicit labels are a clear and flexible approach and work well with most form layouts.

Implicit Labels

A form control can also be placed inside its <label> element. This creates an implicit association between the label text and the control.

<label>
  Email:
  <input type="email" name="user_email">
</label>

Although this method is valid, using explicit for and id values often makes the relationship easier to recognize in the HTML and provides more flexibility when styling the form.

Labels Increase the Clickable Area

A properly associated label does more than describe a control. Selecting the label also activates or focuses its associated control.

This is particularly useful with small controls such as checkboxes and radio buttons because users can select the label text instead of having to select only the control itself.

<input type="checkbox" id="html" name="user_hobby[]" value="HTML">
<label for="html">Learning HTML</label>

Form Label Example

Experiment with the labels in the following example. Select a label to place focus on its associated form control, then change the for or id value to see why matching values are important.

Label Best Practices

• Give form controls clear labels that describe their purpose.
• Use matching for and id values when creating explicit labels.
• Remember that id associates a control with its label, while name identifies submitted form data.
• Keep label text concise and easy to understand.
• Do not rely on placeholder text as a replacement for a label.
• Label checkboxes and radio buttons so their text can also be selected.

Summary

The <label> element identifies the purpose of a form control and helps make forms easier to understand and use. Explicit labels connect the label's for value with the control's id, while controls may also be nested inside labels to create an implicit association.

Proper labels are an important part of building usable and accessible HTML forms.