Forms With Style Part 3 - The Select Control
4th edition — by Patrick McNeil — Jan. 27, 2006
The Design Element
A
word of warning before we get started. This article began as an
exploration of what is possible with the select control and extending it
with css. As it turns out, the select control has so many browser problems
that it renders most of the tests here unusable. Firefox
on the PC produces the best results for the samples given. The simplest rendition of the OptGroup
are useful on most platforms except Safari. The remaining portions work best
in FireFox on a pc. I wasn't even going to post the article, but since I
figured I had spent the time testing it out I might as well publish it, perhaps
it will save others the effort of trying. Of course if you have done this
sort of thing successfully please let us know!. So be warned, and proceed
with caution.
The Design Element
The Select control is very well known. It is simply a basic means to gather
input from a user. But a lesser known tag, the OptGroup, is a great way to
enhance this tired old control.
The Select tag
The select tag is a pretty basic html tag. It lets you select a single item
from a drop down list. Nothing extraordinary going on here.
The OptGroup tag
The OptGroup seems to be one of those commonly overlooked elements that
has the power to really improve user interaction in a web form. This tag
can is used in conjunction with the Select control to create groupings within
a drop down box.
The basic sample
Lets look at a very basic sample to see what it does.
As you can see the OptGroup could be a way to improve a users interaction
with a form. By grouping elements together you can add a layer of information
to the data stored in the drop down box.
Add some style & communicate more information
Lets look at some options we have for adding additional information
to the control through the use of css.
In the following example you can see how we added background styles to each
of the OptGroup elements. This affects all of the individual option tags
contained within it. Consider the following contact form for a gas company
where you select the type of assistance you need. This basic style could
assist in easy selection of an appropriate option.
Adding images to the mix
Another great example is this one for selecting a t-shirt size and color:
This is really
all about communicating with the user in a way that requires less thought
and quicker action. Consider the user and how you can possibly consolidate
multiple options into a single select control.
Unfortunately browsers are pretty stuck in there ways in regards to rendering
the select control. Hopefully in the future browsers will play nicer when
it comes to css and forms.
Links
Form Showcase (GREAT inspiration)
W3Schools Links:
HTML
Fieldset tag
HTML
Legend tag
HTML
Label tag
CSS Position property
CSS Display property
CSS Top property
Other Links
FamFamFam (free
and beautiful icons used on this page)
Great
Fieldset samples
IE
fix for displaying legends in fieldsets
The Form Assembly
Jot Form (online form builder)
