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.