What Does In HTML: Easy Tutorial With Code Example

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”> Click this label to select.

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