Open In App

HTML | for Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

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




<!-- 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.  

html




<!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


Last Updated : 22 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads