The <label> tag in HTML 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 defines the label for <button>, <input>, <meter>, <output>, <progress>, <select>, or <textarea> element.
The <label> tag can be used in two ways:
- Firstly, use <label> tag by providing the <input> and id attribute. The <label> tag needs a for attribute whose value is the same as input id.
- Alternatively, <input> tag use directly inside the <label> tag. In this case, the for and id attributes are not needed because the association is implicit.
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: 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: Here 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
- Edge 12
- Internet Explorer
- Firefox
- Opera
- Safari
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
30 Mar, 2023
Like Article
Save Article