Photo from Chile

What the heck is an optgroup?

Posted At : September 9, 2008 7:25 AM | Posted By : Bob Silverberg
Related Categories: cfUniForm, ColdFusion

Although I've been developing web applications with ColdFusion for about a decade, I only discovered the existence of this html tag a few days ago, and it's way cool.

I've been reading up on creating accessible forms, and this article made the following suggestion:

Complex selects, with more than 11 options, should be coded with option groups and labels.

And contained the following example:

Pretty cool, eh? Here's the code:

view plain print about
1<label for="favcity">Which is your favourite city?
2    <select id="favcity" name="favcity">
3    <optgroup label="Europe">
4        <option value="1">Amsterdam</option>
5        <option value="3">Interlaken</option>
6        <option value="4">Moscow</option>
7        <option value="5">Dresden</option>
8    </optgroup>
9    <optgroup label="North America">
10        <option value="2">New York</option>
11        <option value="6">Salt Lake City</option>
12        <option value="7">Montreal</option>
13        <option value="13">Toronto</option>
14    </optgroup>
15    <optgroup label="South America">
16        <option value="8">Buenos Aires</option>
17        <option value="9">Asuncion</option>
18    </optgroup>
19    <optgroup label="Asia">
20        <option value="10">Hong Kong</option>
21        <option value="11">Tokyo</option>
22        <option value="12">New Dehli</option>
23    </optgroup>
24    </select>
25</label>

I also decided to try out the cfUniForms Library by Matt Quackenbush to help me create more accessible forms and found it to be an extraordinarily well written and useful tool, with one exception, no optgroup support. So I spoke to Matt and decided to add that support myself. I also mentioned a couple of other enhancements that I'd like to see and he implemented them pretty much immediately. He'll be releasing a new version of the library with all of the new enhancements pretty much as soon as I finish writing this post ;-)

Update: Matt has released a new version of cfUniForm with these enhancements.

So, if you're interested in creating accessible forms and aren't already using a custom tag library to both reduce the amount of code you have to write and to encapsulate your field rendering logic, you may want to check out cfUniForm. And if you're not already using option groups, maybe you'll give them a try as well.

Update: Paul Marcotte has chimed in with his article about styling option groups.

Comments Comments (5) | Print Print | 3354 Views | Bookmark and Share
TweetBacks
Comments
[Add Comment] [Subscribe to Comments]
Bob, yes, opt group is awesome. I only just learned about it a little over a year ago. It is a much better solution than having the disabled option to represent groups. By coincidence, I just downloaded cfUniForms yesterday and I am looking forward to trying it out soon. I'll be interested to hear any thoughts you have on it (unless I beat you to it) :)
# Posted By Jason Dean | 9/9/08 8:17 AM
The article you reference may mention this, but sometimes it doesn't make sense to use optgroup. For example, one of our apps used a select box for cities, and we thought we'd make it easier by grouping them by county. We quickly realized that many users didn't know which county a particular city is in. In this case, it was best to simply list the 100 plus cities in alphabetical order, or in our case, just use a text input (with autocomplete).
# Posted By Brad Roberts | 9/9/08 10:47 AM
optgroups are VERY handy indeed. we use them a lot in our application when we do drop downs of employees, with each optgroup being the first letter of their last name.

Example:
A
Anders, Joe
Ayre, Jane
B
Bloke, Joe
...and so on. makes finding an entry in an alphabetized list MUCH easier for the user.
# Posted By James | 9/9/08 10:50 AM
The coolest application of optgroup was in the old IE 5 for Mac. Instead of the bold, disabled options, it would actually present the select list as a series of submenus. There's a screen shot of it at http://www.websiteoptimization.com/speed/4/4-7.htm.... It's probably the only thing that browser did that was worthy of mention, but there you go.
# Posted By Rob Huddleston | 9/9/08 12:58 PM
@Jason: I'm really liking cfUniForm, and Matt's been tremendously responsive to enhancement requests.

@Brad: Definitely there are times when you'll want to use an option group, and times when you won't. I don't think the article was trying to suggest that you should always use them when there are more than 11 options, but just that you should consider it.

@James: Definitely a great example of a use case for option groups! Thanks.

@Rob: That is very cool. Hmm, I wonder if I can get jQuery to do something like that?
# Posted By Bob Silverberg | 9/10/08 8:57 AM
[Add Comment]