Forms With Style Part 1 - Fieldsets & Labels
1st edition — by Patrick McNeil — Jan. 20, 2006
The Design Element
Designing forms for the web can be both fun and frustrating, and it certainly
requires a great deal of persistence and determination. Custom styling of
forms can be critical to the beauty and function of a form. For simple contact
forms it is just a matter of making it fit the site. But, on forms
for larger web based applications where lots of data
is being entered, it becomes imperative that you style forms in a way which
makes them easy to work with.
There are two basic html tags which are quite often over looked and are
seldom used. They are the fieldset and label tag. The real irony is that
most developers end up wrapping text used for labels in a div or span anyway,
and groups of form elements in the same way. This gives them a hook for the
css tags to use to render them as needed. The fieldset and label do the
same thing with all the added bonuses. Sample 1 below shows a basic form
with both of these elements and no custom styles applied.
The Fieldset Tag
The fieldset tag draws a box around its containing elements. The legend
tag adds a title to the frame and places it within the frame as seen in sample
1. The fieldset serves to help you group form elements into logical groupings.
This reduces the initial shock a long form might present to the user and
informs them of the types of data they will be entering.
The Label Tag
The label tag is yet another seldom used tag. The label serves two
purposes. One, it gives a label to the form element identifying it. Secondly,
clicking on the label sets the focus of the cursor to the associated form
field when the user clicks on it, obviously a convenient enhancement for
the user. This is extremely useful
on option buttons and check boxes in particular.
When working with labels, don't miss the for attribute. It is key
in terms of identifying which form control the label is associated with.
The label tag can be wrapped around the associated control, but this isn't
required. So using this tag will ensure that in all situations in all browsers
the label will be linked to the correct control. This means that the previously
mentioned benefits of using a label will function properly.
Sample 1 shows both of these tags in action as they appear by default. No
styles have yet to be applied.
Add Some Background Color
Sample 2 below shows the same form with some basic
styles applied. Background colors were added to show how the background
of the fieldset interacts with the background of the page or any parent
elements. Note,
the overlap of the background is quite different depending on the browser
you use. Also notice how the left padding added to the fieldset bumps both
the contents and the legend in.
Further Emphasize The Legend
In sample 3 we have added some decoration to the legend tags. Don't forget
that you can include other html elements inside of the legend such as the icons
used here. Notice that the background color of the fieldset still overlaps
on the top in internet explorer, we will fix this in the next step.
Fix Internet Explorer Rendering Problems
Finally in the fourth sample you can see that that overlap of the background
in the fieldset has been corrected. This is accomplished through 3 key
css tags. Credit needs to be given to Jeff
Croft, his article provided me the one piece I was missing, the negative
positioning on the legend tag.
- position:relative;
Place this tag on both the legend and the fieldset. This moves where
the item appears on the page, but the space it originally occupied
is what everything else on the page is rendered against. It is as though
a ghost of the object occupies the original space.
- display:block;
The fieldset must be set to display:block. This prevents the legend of
one fieldset from overlapping the previous one.
- top: -12px;
The legend must have a negative top value assigned to it. This moves it
out of it's normal position and upwards. Which strangely enough doesn't
really change where it falls in relation to the border of the fieldset.
You will however see the change in the background overflow in IE as you
figure out just the right amount to set it to.
Continue to Part 2 where we present some various styling of fieldsets
and labels through the magic of css. Continue to part
2 »
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)
