Skip to content
Related Articles

Related Articles

Improve Article
How to create a group of related options in a drop-down list using HTML ?
  • Last Updated : 20 May, 2020

We can define a group of related options in a drop-down list by using the <optgroup> Tag tag is used to create a group of same category options in a drop-down list. The tag is required when there is a long list of items.

Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to define a group of
        related options in a
        drop-down list?
    </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>
        How to define a group of related
        options in a drop-down list
    </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:

Supported Browsers are listed below:

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :