Using optgroup to group options in an HTML select box

Posted May 9th, 2009 in HTML and CSS

Following on with my current theme of looking at some useful form tags in HTML (last week I looked at fieldset and legend and the week before at label) this week's HTML post will look at using the optgroup tag to group options together in a select box.

First, an example to show what I'm talking about:

If you open up the select box you'll see that there are two groups of options labelled "Fruit" and "Veges". Depending on the browser you are using, this will be bold+italic, bold, background bold etc, but in same way made to look like a heading and it is not selectable. The options under the group name is indented and not bold.

Here's the HTML behind the select box above:

<form>
    What is your favorite food?<br />
    <select name="food">
        <option></option>
        <optgroup label="Fruit">
            <option>Apples</option>
            <option>Bananas</option>
            <option>Oranges</option>
        </optgroup>
        <optgroup label="Veges">
            <option>Beans</option>
            <option>Carrots</option>
            <option>Peas</option>
        </optgroup>
    </select>
</form>

The "label" property of the <optgroup> tag is what appears as the heading for the group of options.

It's possible to style the optgroup with CSS but I'll look at that in next week's HTML/CSS post.