A CSS style guide for form fieldsets

Recently we were asked to clean up some old table formatted credit card forms. At the same time the client was implementing a new credit card system which meant all of the existing forms now had to be updated to the new format and standards of the web application.

Besides removing the bloated table code, I decided to take a look at styling the fieldsets for the form.

Field sets are a great way to categorize or lump similar form fields together. For instance if you have a form that asks the user for her name and address and also asks info about her car, you can separate the contact info into 1 fieldset and the car info into another fieldset.

A great way to do this is style each section inside of a fieldset.

Categorize your form fields with fieldset

I’ve always believed in making a form intuitive and ‘stupid’ proof.  You’d be surprised how many people will leave your site if things become too complicated.  But we’ll save that for another topic.

Now that you have your form fields categorized let’s take a look at how to style them.

Below is a simple fieldset with a basic table. This code works cross browser and has been tested.

[xhtml]
<fieldset>
<legend>Parent/Guardian information</legend>
<label for="name">Parent/Guardian name:</label>
<input name="name" id="name" type="text" size="30" maxlength="50" /></td>
</fieldset>
[/xhtml]

Here’s an explanation of what a field set consists of.

fieldset – this is represented by the blue border in the image above. Think of it as a container for your form elements.

legend – The legend is a great way to tell your users what information they are filling out. In this case the form is asking for the Parent/Guardian name, address and such.

So how do you style the fieldset and legend?

Styling is done with CSS. I haven’t read up on the CSS3 capabilities so the styles represented below are CSS2 compliant.

[css]
form legend {
font-size: 1.1em;
color: #FFF;
padding: 0.3em; font-weight: bold;
background-color: #060C56
}

form label {
text-align: inherit;
width: auto
}

form fieldset {
padding : 15px;
border:1px solid #7F9DB9;
width: 96%;
margin: 0 auto
}
[/css]

The code is pretty self explanatory. Nothing out of the ordinary. You may see some slight variation with this in IE but nothing major that would require unnecessary hacks or conditional statements.

One item of note. Internet Explorer will NOT understand the margin: 0 auto; command unless you make reference to a doctype.

Now go knock yourself out and created some stylized field sets. Be sure to share what you’ve done.

Related Posts

How to add a background image to an input field

1 Comment

  1. Richard

    08.04.2011

    The field sets certainly give clear direction to the site visitor. Any aid to completing a form is worthwhile both for the visitor and for ensuring error free data for the website operator.
    Richard recently posted..Real world solar outputsMy Profile

Leave a Reply






You must add your URL for KeywordLuv & CommentLuv to function.



CommentLuv badge

This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.