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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    Before Click on the Button:

    After Click on the Button:

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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


    My Personal Notes arrow_drop_up


    Article Tags :
    Practice Tags :


    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.