The label tag

The label tag specifies a label for an input field of type input, textarea, select and so on.

The label is bound to a specific input field using the for attribute. It should specify the value of the id attribute of the input field to which the label is bound. The label is also bound to an element if this element is placed inside the label tag. In this case, the for attribute does not need to be specified. See examples for a better understanding.

When you click on a label, the checkboxes or radio buttons bound to it will change their state from checked to unchecked and vice versa. In this case, the label is needed for convenience: it is difficult to hit small form elements with the cursor, but it is much easier to hit a long label with text.

A text input field of type input and textarea that is bound to a label will receive input focus. Focus is when the cursor blinks in the input field, in this case, if you type something on the keyboard, the text will go to this field (see pseudo-class focus for an advanced understanding of focus).

The label tag can be used to imitate a checkbox or radio button. This is necessary in order to make a checkbox or radio with your own design (which is prohibited in CSS, but possible with some clever tricks).

Attributes

Attribute	Description
for	This attribute should specify the value of the id attribute of the input field to which the label label is attached.
accesskey	Specifies a hotkey that can be used to jump to the form element bound to the label (via the for attribute). For more information, see the accesskey attribute.

Example . Checkbox

Let's bind a label to the checkbox checkbox using the attribute for. Click on the label and you will see the checkbox change its state from checked to unchecked and vice versa:

:

Example . Inside the label

Now let's not bind the label via the for attribute, but put the elements directly into the label tag, in this case, clicking on the text label will also activate the element:

:

Example . Text input field

Let's bind a label to the input tag using the for attribute. Clicking on the label will result in the input field receiving focus. In this case, the text contained in the field (we will add it using the value attribute) will become selected. If you start typing something on the keyboard, this text will be erased. You can get rid of the selection without deleting the text by clicking the mouse on the input field: the focus will not disappear, but the selection will disappear:

:

See also