HTML <label> Tag
The <label> HTML element represents a caption for an item in a user interface. It enhances accessibility by associating text with form elements. When clicked, it focuses on or activates the associated element, improving usability and providing descriptive context for inputs like text fields, checkboxes, or radio buttons.
The <label> tag can be used in 2 ways:
- Firstly, use the <label> tag by providing the <input> and id attributes. The <label> tag needs an “for” attribute whose value is the same as the input id.
- It uses the
forattribute to connect the label with theidof the form element, its labeling - Alternatively, the <input> tag is used directly inside the <label> tag. In this case, the for and id attributes are not needed because the association is implicit.
Supported Tags
The <label> tag can be defined with the following Tags:
Syntax
<label> form content... </label>
Attribute Value
Attribute Value | Descriptions |
|---|---|
It refers to the input control that this label is for. Its value must be the same as the value of the input control’s “id” attribute. | |
It refers to the form to which the label belongs to. |
Example 1: This example illstrates the basic usage of the <lable> tag in HTML. Here, we will use the input tag outside the label tag.
<!DOCTYPE html>
<html>
<head>
<title>
HTML label Tag
</title>
</head>
<body>
<strong>HTML label Tag</strong>
<br><br>
<form>
<!-- Starts label tags from here -->
<label for="student">
Student
</label>
<input type="radio"
name="Occupation"
id="student"
value="student"><br>
<label for="business">
Business
</label>
<input type="radio"
name="Occupation"
id="business"
value="business"><br>
<label for="other">
Other
</label>
<!-- Ends label tags here -->
<input type="radio"
name="Occupation"
id="other"
value="other">
</form>
</body>
</html>
Output:
HTML label Tag Example Output
Example 2:
In this example, we will use the input tag inside the label tag.
<!DOCTYPE html>
<html>
<body>
<strong> HTML label Tag</strong>
<br><br>
<form>
<!-- label tag starts from here -->
<label>
Male
<input type="radio"
name="gender"
id="male"
value="male" />
</label><br />
<label>
Female
<input type="radio"
name="gender"
id="female"
value="female" />
</label><br />
<label>
Other
<input type="radio"
name="gender"
id="other"
value="other" />
</label>
<!-- label tag ends from here -->
</form>
</body>
</html>
Output:
HTML label Tag Example Output
Supported Browsers
Contact Us