How to specify which form element a label is bound to ?
Last Updated :
24 Nov, 2021
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...