HTML | <optgroup> Tag

Difficulty Level : Basic
Last Updated : 22 Aug, 2019

This tag is used to create a group of same category options in a drop-down list. The <optgroup> tag is required when there is a long list of the item exists.

Attributes

label
Disabled

label: It is used to specify the label for an optgroup.
Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>optgroup tag</title> 
        <style> 
            body { 
                text-align:center; 
            } 
            .gfg { 
                font-size:40px; 
                font-weight:bold; 
                color:green; 
            } 
            .geeks { 
                font-size:17px; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "gfg">GeeksforGeeks</div> 
        <div class = "geeks">A computer science portal for geeks 
        </div> 
        <h2><optgroup> Tag</h2> 
        <select> 
            <optgroup label="Programming Languages"> 
                <option value="C">C</option> 
                <option value="C++">C++</option> 
                <option value="Java">Java</optgroup> 
            <optgroup label="Scripting Language"> 
                <option value="JavaScript">JavaScript</option> 
                <option value="PHP">PHP</option> 
                <option value="Shell">Shell</option> 
            </optgroup> 
        </select> 
    </body> 
</html>                     

Output:
optgroup tag

diabled: It is used to disable the option-group in a list.
Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>optgroup tag</title> 
        <style> 
            body { 
                text-align:center; 
            } 
            .gfg { 
                font-size:40px; 
                font-weight:bold; 
                color:green; 
            } 
            .geeks { 
                font-size:17px; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "gfg">GeeksforGeeks</div> 
        <div class = "geeks">A computer science portal for geeks 
        </div> 
        <h2><optgroup> Tag</h2> 
        <select> 
            <optgroup label="Programming Languages"> 
                <option value="C">C</option> 
                <option value="C++">C++</option> 
                <option value="Java">Java</optgroup> 
            <optgroup label="Scripting Language" disabled> 
                <option value="JavaScript">JavaScript</option> 
                <option value="PHP">PHP</option> 
                <option value="Shell">Shell</option> 
            </optgroup> 
        </select> 
    </body> 
</html>                     

Output:
optgroup disable option
Supported Browser: <optgroup> tag supported by below browsers.

Google Chrome
Internet Explorer
Firefox
Opera
Safari

My Personal Notes

Related Articles