Skip to content
Related Articles

Related Articles

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

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :