The label tag in HTML allows us to click on the label, which will in turn be treated like clicking on the corresponding input type. Input types in the HTML can be a radio button, checkbox, email, date, color, etc. The for attribute specifies which form element a label is bound to.
Syntax:
<label for="element_id"> Label Content </label>
Example 1:
HTML
<!DOCTYPE html>
<html lang="en">
<body style="text-align: center">
<h1 style="color: green">GeeksforGeeks</h1>
<h2>Label for attribute</h2>
<p>Please click on the labels to select the radio button</p>
<form>
<label for="Student">Student</label>
<input type="radio" name="Category" id="Student" value="Student" />
<br />
<label for="WorkingProfessional">
Working Professional
</label>
<input
type="radio"
name="Category"
id="WorkingProfessional"
value="WorkingProfessional"/>
<br />
<label for="Retired">Retired</label>
<input type="radio" name="Category"
id="Retired" value="Retired" />
<br />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
|
Output:
Label for attribute
If we click on Student, the corresponding radio button will be selected, thus increasing the selection area. This is done with the help of a label tag for attributes.
Example 2:
HTML
<!DOCTYPE html>
<html lang="en">
<body style="text-align: center">
<h1 style="color: green">GeeksforGeeks</h1>
<h2>Label Tag</h2>
<p>Please click on the labels to select the radio button</p>
<form>
<label for="Four Wheeler">Four Wheeler</label>
<input
type="radio"
name="Category"
id="Four Wheeler"
value="Four Wheeler"/>
<br />
<label for="Two Wheeler">Two Wheeler</label>
<input
type="radio"
name="Category"
id="Two Wheeler"
value="Two Wheeler"/>
<br />
<label for="Others">Others</label>
<input type="radio" name="Category"
id="Others" value="Others" />
<br />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
|
Output:
Label tag
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 :
24 Nov, 2021
Like Article
Save Article