← 4.10.5 The legend elementTable of contents4.10.7 The input element →

4.10.6 The label element

Categories
Flow content.
Phrasing content.
Interactive content.
Form-associated element.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content, but with no descendant labelable form-associated elements unless it is the element's labeled control, and no descendant label elements.
Content attributes:
Global attributes
form
for
DOM interface:
interface HTMLLabelElement : HTMLElement {
  readonly attribute HTMLFormElement form;
           attribute DOMString htmlFor;
  readonly attribute HTMLElement control;
};

The label represents a caption in a user interface. The caption can be associated with a specific form control, either using for attribute, or by putting the form control inside the label element itself.

The for attribute may be specified to indicate a form control with which the caption is to be associated. If the attribute is specified, the attribute's value must be the ID of a labelable form-associated element in the same Document as the label element.

label . control

Returns the form control that is associated with this element.

The form attribute is used to explicitly associate the label element with its form owner.

The htmlFor IDL attribute must reflect the for content attribute.


control . labels

Returns a NodeList of all the label elements that the form control is associated with.

The following example shows three form controls each with a label, two of which have small text showing the right format for users to use.

<p><label>Full name: <input name=fn> <small>Format: First Last</small></label></p>
<p><label>Age: <input name=age type=number min=0></label></p>
<p><label>Post code: <input name=pc> <small>Format: AB12 3CD</small></label></p>