Using optgroup to group options in an HTML select box

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.