Forms With Style Part 2 - Fieldset & Label Samples
2nd edition — by Patrick McNeil — Jan. 20, 2006
The Design Element
As a continuation of our previous chapter on
how to structure forms using fieldsets and labels we are providing a variety
of samples on how they might be styled. The HTML code for all of the following
examples is exactly the same except as noted. We will discus some of the
techniques used here in later articles. So for now, lets just look at some
of the ways a simple form could be styled and hopefully be inspired!
Note: Safari doesn't play nice when it comes to forms. Sample 6
in particular has some issues with rendering in Safari which remain unresolved.
For sample 2 a class of button was added to the submit button. This enables
us to target it separately from the rest of the input controls. This is the
simplest way to do this across all browsers. Standard compliant browsers
allow the usage of advance selectors that would make this extra class unneeded,
but for now, we must do our best to support IE.
One thing I find particularly remarkable is how helpful it is to have the
type size in the text boxes much larger then you would normally want it.
I find that the large type makes it so easy to scan the form to see what
I have entered. Helping to ensure that the user enters the correct data.
Samples 5 & 6 show this particularly well. Compare this to sample 3 where
the type fits the theme, but isn't nearly as easy to scan for mistakes.
In sample 6 the legend tag was replaced with an h3 tag.
Continue to Part 3 where we present some various ways to style required
fields through the magic of css. Continue to part
3 »
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)
