Optgroup Tag in HTML5

In this article I am going to describe about the implementation and use of Optgroup Tag in HTML5.
  • 1838

Optgroup Tag

<optgroup>  tag is used to group various option in a menu list. With the help of this tag, you can make group of related option along with a label. The label is a attribute of representing name of group.

<select> , <option>  and <optgroup> elements combine to form a menu list of options for possible selection by a user, most commonly used within an online form.

Browser Support

It is supported in all major browsers.

Syntax

 <optgroup label="text"> option tag</optgroup >

Attributes

   Attribute     Value           Description
   disabled    disabled     Element can not receives focus of user. 
    label     string     Name of group

Example of <optgroup> tag in HTML5

<!DOCTYPE html>

 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>Optgroup Tag</title>

</head>

<body>

    <h3>Optgroup Tag in HTML5</h3>

    Select any one game :

    <select style="width: 150px">

        <option value="default">Please Select</option>

        <optgroup label="Indoor Games">

            <option value="chess">Chess</option>

            <option value="ludo">Ludo</option>

            <option value="table tennis">Table Tennis</option>

        </optgroup>

 

        <optgroup label="Outdoor Games" disabled="disabled">

            <option value="cricket">Cricket</option>

            <option value="hockey">Hockey</option>

            <option value="volley ball">Volley Ball</option>

        </optgroup>

    </select>

</body>

</html>

 

Output

 optgroup.jpg

© 2020 DotNetHeaven. All rights reserved.