View video tutorial

HTML <optgroup> Tag


The <optgroup> tag is used to group related options in a <select> element

HTML <optgroup> Tag

The <optgroup> element creates group with the similar options in a <select> element.

The <optgroup> tag is useful for creating groups when the item has a long list.

Element Attributes

Attribute Value Description
disabled disabled This specifies that the option-group has been disabled.
label text This specifies a label for the option-group.

Global attributes

Global attributes may be applied on all elements, although some elements may have no effect on them.

<accesskey>, <class>, <contenteditable>, <contextmenu>, <data-*>, <dir>, <draggable>, <dropzone>, <hidden>, <id>, <lang>, <spellcheck>, <style>, <tabindex>, <title>, <translate>.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.


<form action="action_page.jsp">
    <label for="food">Choose a Seafood:</label>
    <select name="food" id="food">
        <optgroup label="Fish">
            <option value="anchovies">Anchovies</option>
            <option value="basa">Basa</option>
            <option value="cod">Cod</option>
            <option value="salmon">Salmon</option>
            <option value="tuna">Tuna</option>
        <optgroup label="Crustaceans">
            <option value="crabs">Crabs</option>
            <option value="lobsters">Lobsters</option>
            <option value="shrimps">Shrimps</option>
            <option value="prawns">Prawns</option>
    <input type="submit" value="Submit">
Try it Now »

Click on the "Try it Now" button to see how it works.