Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Option label Property

  • Last Updated : 13 Feb, 2019

The Option label property in HTML DOM is used to set or return the value of the label attribute in an <option> 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 is used to set the label property.
    optionObject.label = text

    Property Value: This property contains single value text which is used to represents the shorted label for option.

    Return Value: It returns a string value which represent the shortest label for option element or in a drop-down list.

    Example 1: This example describes how to set option label property.






    <!DOCTYPE html> 
    <html
        <head
            <title>
                HTML DOM Option label Property
            </title>
        </head>
          
        <body style="text-align:center;"
          
            <h1 style="color:green;">
                GeeksforGeeks
            </h1
              
            <h2>DOM option label Property</h2
              
            <select
                <option>Choose an option</option
                <option id="GFG" label="html">HTML</option
                <option id="Geeks" label="java">JAVA</option
                <option id="sudo" label="C++">C++</option
            </select> <br><br><br><br><br>
              
            <button onclick = "myGeeks()">
                Submit
            </button>
              
            <!-- script to use option label property -->
            <script>
                function myGeeks() {
                    document.getElementById("Geeks").label
                            = "Javascript";             
                }
            </script>
        </body
    </html>                                                                          

    Output:
    Before Click on the Button:

    After Click on the Button:

    Example 2: This example describes how to return Option label property.




    <!DOCTYPE html>
    <html>
          
    <head>
        <title>
            HTML DOM option label Property
        </title>
    </head>
      
    <body style = "text-align:center;">
      
        <h1>GeeksforGeeks</h1
          
        <h2>DOM option label Property</h2
          
        <select
            <option>Choose an option</option
            <option id="GFG" label="html">HTML</option
            <option id="Geeks" label="java">JAVA</option
            <option id="sudo" label="C++">C++</option
        </select>
          
        <br><br>
      
        <button onclick = "myGeeks()">
            Submit
        </button>
      
        <p id="demo" style="font-size:25px;color:green;"></p>
          
        <!-- script to return option label property -->
        <script>
            function myGeeks() {
                var x = document.getElementById("Geeks").label;
                document.getElementById("demo").innerHTML = x;
            }
        </script>
    </body>
      
    </html>                    

    Output:
    Before Click on the Button:

    After Click on the Button:

    Supported Browsers: The browser supported by DOM Option label property are listed below:

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

    Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




    My Personal Notes arrow_drop_up
Recommended Articles
Page :