• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
The Electric Toolbox Blog

The Electric Toolbox Blog

Linux, Apache, Nginx, MySQL, Javascript and PHP articles

  • Applications
  • FCKEditor
  • Apache
  • Windows
  • Contact Us
Home / Using optgroup to group options in an HTML select box

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:

What is your favorite food?

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.

Check Out These Related posts:

  1. Style HTML form elements optgroup and option with CSS in Chrome
  2. Style HTML form elements optgroup and option with CSS in Opera
  3. Styling select, optgroup and options with CSS
  4. Add options to an HTML select box with Javascript

Filed Under: HTML And CSS

Primary Sidebar

Categories

  • Apache
  • Applications
  • Article
  • Case Studies
  • Email Servers
  • FCKEditor
  • HTML And CSS
  • Javascript
  • Linux/Unix/BSD
  • Microsoft SQL Server
  • Miscellaneous Postings
  • MySql
  • Networking
  • Nginx Web Server
  • Offsite Articles
  • OSX
  • PHP
  • Quick Tips
  • RFC – Request for Comments
  • SilverStripe
  • VMWare
  • VPN
  • Windows
  • WordPress

Recent Posts

  • Vim Show Line Numbers
  • Add User To Group Linux
  • Chmod 777 Tutorial
  • How to Copy Directory Linux
  • Linux create user

Copyright © 2021. ElectricToolBox. All Rights Reserved.

  • Contact Us
  • Copyright Info
  • Privacy Policy
  • Sitemap