The HTML <label> Tag

Definition and usage

<label> Labels define annotations (markers) for input elements.

The label element does not present any special effects to users. However, it improves accessibility for mouse users. If you click on the text within the label element, it will trigger this control. That is, when the user selects the label, the browser will automatically focus on the form control related to the label.

<label> The label's for attribute They should be the same as the id attribute of the related elements.

<label> Labels can define labels (markers) for multiple elements:

Using the correct way to combine the above elements with labels will be beneficial for the following users:

  • Screen reader users (when the user focuses on an element, the label will be read)
  • 难以点击非常小的区域（例如复选框）的用户 - 因为当用户单击 <label> When the text in the element is switched, it toggles the input (this increases the clickable area) for users who find it difficult to click on very small areas (such as checkboxes) - because when the user clicks

See also:

HTML DOM Reference Manual:Label Object

Example

Three radio buttons with labels:

<form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Submit">
</form>

Try it yourself

Tips and Comments

Tip:<label> The for attribute must be equal to the id attribute of the related element to bind them together. It can also be done by placing the element in <label> The label is bound to the element within the element.

Attribute

Attribute Value Description
for Element id Specifies which form element the label is bound to.
form Form id Specifies the form to which the label field belongs.

Global Attributes

<label> The tag also supports Global attributes in HTML.

event attributes

<label> The tag also supports Event attributes in HTML.

Default CSS Settings

Most browsers will use the following default values to display <label> Element:

label {
  cursor: default;
}

Try it yourself

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support