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.
