Tutorialspoint.dev

HTML | <optgroup> Tag

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 long list of item exist.

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



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter