Tutorials 参考 练习 Menu
Paid Courses

HTML <label> Tag


Example

Three radio buttons with labels:

<form action="/action_page.php">
  <label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>
来试试吧 »

Definition and Usage

The <label> tag defines a label for several elements:

Proper use of labels with the elements above will benefit:

  • Screen reader users (will read out loud the label, when the user is focused on the element)
  • Users who have difficulty clicking on very small regions (such as checkboxes) - because when a user clicks the text within the <label> element, it toggles the input (this increases the hit area). 

Tips and 笔记

Tip: The for attribute of <label> must be equal to the id attribute of the related element to bind them together. A label can also be bound to an element by placing the element inside the <label> element. 


Browser Support

Element
<label> Yes Yes Yes Yes Yes


Attributes

Attribute Value Description
for element_id Specifies the id of the form element the label should be bound to
form form_id Specifies which form the label belongs to

Global Attributes

The <label> tag also supports the Global Attributes in HTML.


Event Attributes

The <label> tag also supports the Event Attributes in HTML.


Related Pages

HTML DOM reference: Label Object


Default CSS Settings

Most browsers will display the <label> element with the following default values:

Example

label {
  cursor: default;
}
来试试吧 »





W3Schools is optimized for learning and training. 示例 might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
W3Schools is Powered by W3.CSS.