HTML <label> 标籤

Definition and usage

<label> The label defines annotations (markers) for the input element.

The label element does not present any special effects to the user. However, it improves usability 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 It should be the same as the id attribute of the relevant element.

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

Using the correct way of the above elements with label will be beneficial to the following users:

  • Screen reader user (when the user focuses on the element, it will read the label)
  • 难以点击非常小的区域（例如复选框）的用户 - 因为当用户单击 <label> When the text in the element is switched, it toggles the input (this increases the click 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 element binds the label to the element inside.

Attribute

Attribute Value Description
for Element id Specifies which form element the label is bound to.
form Form id Specifies the form field to which the label 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