The HTML | for Attribute is used in both the <label> and the <output> element.
For Attribute In label element: When present in the label element, It is used to specify the type of form element a label is bound to.
Supported Tags :
- <label>
- <output>
Syntax:
<label for="element_id">
Attribute Values: It contains the value i.e element_id which specify the id of the element that the supported is bound to.
Example-1: This Example illustrates the use of for attribute in label element.
<!-- HTML code to illustrates label tag --><!DOCTYPE html><html>
<head>
<title>
HTML | for Attribute
</title>
<style>
body {
font-size: 20px;
}
</style>
</head>
<body style="text-align:center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>HTML | for Attribute</h2>
<form>
<!-- Starts label tag 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:
For Attribute In Output element: When Present in the Output Element, It specifies the relationship between the result and the calculation.
Syntax:
<output for="element_id">
Example-2: This Example illustrates the use of the For Attribute in Output Element.
<!DOCTYPE html><html>
<head>
<title>
HTML | For Attribute
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>HTML | For Attribute</h2>
<form oninput="sumresult.value = parseInt(A.value)
+ parseInt(B.value) + parseInt(C.value)">
<input type="number"
name="A"
value="50" /> +
<input type="range"
name="B"
value="0" /> +
<input type="number"
name="C"
value="50" />
<br /> Submit Result:
<output name="sumresult"
for="A B C">
</output>
<br>
<input type="submit">
</form>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by HTML For Attribute in <label> tag are listed below:
- Google Chrome
- Edge version 12 and above
- Internet Explorer
- Firefox
- Opera
- Safari
Supported Browsers: The browser supported by HTML For Attribute in <output> tag are listed below:
- Google Chrome version 10 and above
- Edge 18 and above
- Internet Explorer is not supported
- Firefox version 4 and above
- Opera 11 and above
- Safari 7 and above