HTML Label Element About Label


The <label> element is used to reference a form action element.
In the scope of User Interface it's used to ease the target / selection of elements like Type radio or checkbox.

<label> as wrapper

It can enclose the desired action element

    <input type="checkbox" name="Cats">
    I like Cats!

(Clicking on the text the target input will toggle it's state / value)

<label> as reference

Using the for attribute you don't have to place the control element as descendant of label - but the for value must match it's ID

<input id="cats" type="checkbox" name="Cats">
<label for="cats" >I like Cats!</label>

Don't use more than one Control Element within a <label> element