`<label> HTML Tag`

0 Shares

Element of: Forms
What does <label> HTML Tag do?: The <label> element is used to associate a text label with a form <input> field. The label is used to tell users the value that should be entered in the associated input field.
Display: inline

Contents

1 Code Example
2 Using Labels Properly
3 Labels and Usability
4 Browser Support for label
5 Attributes of label

Code Example

<form>
 <label for="favorite-animal">Favorite Animal</label><br>
 <input name="favorite-animal" id="favorite-animal">
</form>

Using Labels Properly

The <label> element is one of a handful of elements that only exists and makes sense in relationship to another element. In the case of <label>, the label has to be associated with a form field (usually in <input> element of one sort or another.

For a <label> to work properly, it must include a for attribute, which identifies the <input> to which it is associated. The for attribute's value should match the id (not the name) of the <input> element.

(Form submission relies on name and label pairing relies on id. This is why you will often see <input> elements with the same value in both attributes. And if the <input> is a checkbox, you might see the same value in the value attribute, and as the content of the <label> element.)

<label for="first-name">First Name</label><br>
<input id="first-name" name="first-name">

First Name

<p>Do you agree to the terms and conditions?</p>
<input type="checkbox" name="agree" id="agree" value="agree"><label for="agree"> Agree</label>

Do you agree to the terms and conditions?

Agree

Labels and Usability

It is, of course, possible to not use the <label> element, and just put unmarked text over or next to a form field. But this isn't a good idea. Having a paired label is more than just good semantics, it is good usability. With a properly marked-up label, the user can click (or finger-tap) the label in order to bring focus to the element or select it. This is moderately helpful on regular desktop and laptop computers, but on touchscreen mobile phones, it makes a huge difference.

<!-- With the label -->
<input type="checkbox" name="easy" id="easy" value="easy"><label for="easy"> Click this label to select.</label>
<br><br>
<!-- Without proper labelling -->
<input type="checkbox" name="hard" id="hard value="hard"> Can you click this label to select?

div class=”render”> Click this label to select.

<input type=”checkbox” name=”hard” id=”hard value=”hard”> Can you click this label to select?

So, aside from basic usability, you also want to be actively working to make your website accessible to the blind and visually impaired — or anyone else who might use a screen reader to browse the internet. The association of the label to the form field allows the screen reader user to know what is obvious to a sighted a user: what words are attached to what form fields.

For more information on this topic, see our tutorial on form usability.