HTML <label> Tag
Last Updated :
13 Dec, 2023
The HTML <label> tag enables to rendering of the caption for the specific items in the webpage. It is used to provide a usability improvement for mouse users i.e., if a user clicks on the text within the <label> element, it toggles the control.
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
for
attribute to connect the label with the id
of 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
for
|
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.
|
form
|
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.
html
<!DOCTYPE html>
< html >
< body >
< h1 >GeeksforGeeks</ h1 >
< strong >HTML label Tag</ strong >
< form >
< 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 >
< input type = "radio"
name = "Occupation"
id = "other"
value = "other" >
</ form >
</ body >
</ html >
|
Output:Â
Example 2:Â In this example, we will use the input tag inside the label tag.
html
<!DOCTYPE html>
< html >
< body >
< h1 > GeeksforGeeks</ h1 >
< strong > HTML label Tag</ strong >
< form >
< 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 >
</ form >
</ body >
</ html >
|
Output:Â
Supported Browsers
- Google Chrome 1 and above
- Edge 12 and above
- Firefox 1 and above
- Opera 15 and above
- Safari 4 and above
Share your thoughts in the comments
Please Login to comment...