Open In App

HTML <optgroup> Tag

Improve
Improve
Like Article
Like
Save
Share
Report

The HTML <optgroup> Tag is used to create a group of the same category options in a drop-down list. The <optgroup> tag is required when there is a long list of items exist. It has a single attribute, label which is used to specify a label or heading for the grouped options.

Note: The <optgroup> tag also supports the Global Attributes and Event Attributes in HTML.

Syntax:

<optgroup>
<option>..</option>
.
.
</optgroup>

Attributes:

Attribute Values

Description

label

It is used to specify the label for an optgroup.

disabled

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

Example 1:  In this example, we will implement the optgroup tag in an HTML document.

html




<!DOCTYPE html>
<html>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML optgroup Tag</h2>
    <select>
        <!-- optgroup tag starts -->
        <optgroup label="Programming Languages">
            <option value="C">
                C
            </option>
            <option value="C++">
                C++
            </option>
            <option value="Java">
                Java
            </option>
        </optgroup>
        <optgroup label="Scripting Language">
            <option value="JavaScript">
                JavaScript
            </option>
            <option value="PHP">
                PHP
            </option>
            <option value="Shell">
                Shell
            </option>
        </optgroup>
        <!-- optgroup tag ends     -->
    </select>
</body>
 
</html>


Output: 

hyu

Example 2:  In this example, we will implement the outgroup tag code in an HTML document.

html




<!DOCTYPE html>
<html>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML optgroup Tag with disabled property</h2>
    <select>
        <!-- optgroup tag starts -->
        <optgroup label="Programming Languages">
            <option value="C">
                C
            </option>
            <option value="C++">
                C++
            </option>
            <option value="Java">
                Java
            </option>
        </optgroup>
        <optgroup label="Scripting Language" disabled>
            <option value="JavaScript">
                JavaScript
            </option>
            <option value="PHP">
                PHP
            </option>
            <option value="Shell">
                Shell
            </option>
        </optgroup>
        <!-- optgroup tag ends -->
    </select>
</body>
 
</html>


Output: 

kio

Supported Browser: 

  • Google Chrome 1
  • Edge 12
  • Firefox 1
  • Opera 15
  • Safari 4


Last Updated : 02 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads