Open In App

HTML DOM Label htmlFor Property

Last Updated : 02 Jun, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The DOM Label htmlFor Property is used to set or return the value of the for attribute of a <label> element. The For attribute defines which form element will be labeled. 

Syntax: 

  • It is used to return the htmlFor property:
labelObject.htmlFor
  • It is used to set the htmlFor property:
labelObject.htmlFor = id

Property Values: 

  • id: It defines an id attribute of the element that should be labeled.

Return Value: It returns a string value which represents the id of the element that will be labeled. 

Example-1: HTML Program that illustrates how to return the property. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>DOM Label htmlFor Property
  </title>
 
    <style>
        body {
            font-size: 20px;
        }
    </style>
</head>
 
<body style="text-align:center">
 
    <h1 style="color:green">GeeksforGeeks
  </h1>
    <h2>DOM Label htmlfor Property</h2>
 
    <form>
 
        <!-- Starts label tag from here -->
        <label for="student"
               id="GFG">
            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>
    <br>
    <button onclick="myGeeks()">Submit
  </button>
   
    <p id="sudo"></p>
    <script>
        function myGeeks() {
           
            // Return htmlfor property.
            var g =
            document.getElementById("GFG").htmlFor;
            document.getElementById("sudo").innerHTML =
              g;
        }
    </script>
</body>
 
</html>


Output: 

Before Clicking On Button

    

After Clicking On Button:

 Example-2: HTML Program that illustrates how to set the htmlFor property.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>DOM Label htmlFor Property
  </title>
 
    <style>
        body {
            font-size: 20px;
        }
    </style>
</head>
 
<body style="text-align:center">
 
    <h1 style="color:green">GeeksforGeeks
  </h1>
   
    <h2>DOM Label htmlfor Property</h2>
 
    <form>
 
        <!-- Starts label tag from here -->
        <label for="student"
               id="GFG">
            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>
    <br>
    <button onclick="myGeeks()">Submit
  </button>
   
    <p id="sudo"></p>
    <script>
        function myGeeks() {
           
            // Set htmlfor property.
            var g =
           document.getElementById("GFG").htmlFor =
                "Employees"
            document.getElementById("sudo").innerHTML =
          "The value of the For attribute was "
            "changed from student to " + g;
        }
    </script>
</body>
 
</html>


 Output: 

Before Clicking On Button:

 

After Clicking On Button:

 

 

Supported Browsers: The browser supported by DOM Label htmlFor Property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


Similar Reads

HTML | DOM Output htmlFor Property
The HTML DOM Output htmlFor Property is used for returning the value of the for attribute of an &lt;Output&gt; Element. The htmlFor Attribute is used to specify the relationship between the result and the calculation. Syntax: outputObject.htmlFor Parameter: This property does not accepts any parameter. Return Value: It returns a element_id Which re
1 min read
ReactJS htmlFor Attribute
React.js library is all about splitting the app into several components. Each Component has its own lifecycle. React provides us some in-built methods that we can override at particular stages in the life-cycle of the component. In class-based components, the htmlFor attribute is used to get the HTML for the given HTML elements. Creating React Appl
2 min read
HTML | DOM Option label Property
The Option label property in HTML DOM is used to set or return the value of the label attribute in an &lt;option&gt; element. The label attribute is used to specify the label for an option. This attribute contains the text value which represents the shorted label for the option. Syntax: It is used to return the label property. optionObject.label It
2 min read
HTML | DOM Track label property
The DOM track label property is used to set or return the value of the label attribute of the track. It is used to specify the label of the text track. Syntax: It is used to return the label property. trackObject.label It is also used to set the label property. trackObject.label = label Value: label: It is used to specify the title of the text trac
2 min read
HTML DOM OptionGroup label Property
The OptionGroup label Property in HTML DOM is used to set or return the value of the label attribute in an &lt;optgroup&gt; element. The label attribute is used to specify the description of an OptionGroup element. Syntax: It returns the optiongroup label property. optiongroupObject.labelIt is used to set the optiongroup label Property. optiongroup
2 min read
HTML DOM Label form Property
The HTML DOM Label form Property is used for returning the reference to the form containing the Label Element. It is read-only Property that returns a form object on success. Syntax: labelObject.form Return Value: It returns a reference that contains the label and null if the label is not in the form returns a form. Example: In this example, we wil
1 min read
HTML DOM Label Object
The DOM Label Object is used to represent the &lt;label&gt; element. The Label element is accessed by getElementById(). Properties: control: It is used to return the labeled control.form: It is used to return the address of the form that contains the label.htmlFor: It is used to set or return the value of the for attribute of a label. Syntax: docum
2 min read
HTML | aria-label attribute
The aria-label helps define a string and provides additional information about the structure of the document for users using assistive technology. In most cases, arial-label is used to replace an existing label with more precise information. However, we should be careful while using aria-label as it does not work with all HTML elements. The aria-la
2 min read
How to create an HTML checkbox with a clickable label?
To make an HTML checkbox with a clickable label means the checkbox gets on/off when the label is clicked. Below are the methods: Using checkbox inside label tag: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; Create an HTML checkbox with a clickable label &lt;/title&gt; &lt;!-- Adding Style to label --&gt; &lt;style&gt; .GFG { backgr
2 min read
HTML &lt;label&gt; for Attribute
The HTML &lt;label&gt; for Attribute is used to specify the type of form element a label is bound to. Syntax: &lt;label for="element_id"&gt; Attribute Values: It contains the value i.e element_id which specify the id of the element that the label is bound to. Example: This Example that illustrates the use of for attribute in &lt;label&gt; element.
1 min read
Article Tags :