What Does In HTML: Easy Tutorial With Code Example
- Element of
- HTML Web Forms Tutorial For Coding Beginners
- What does
What Does In HTML: Easy Tutorial With Code Example
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
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">
<p>Do you agree to the terms and conditions?</p>
<input type="checkbox" name="agree" id="agree" value="agree"><label for="agree"> Agree</label>
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”>
<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.
Browser Support for label
![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
All | All | All | All | All | All |