Cascading Style Sheets (CSS): November 2006 Archives

Ready, Fieldset, Go!

|

It's tough laying out forms and even tougher to make them pretty and accessible. With a little extra effort, and help with some nifty XHTML tags, you can get the results you want with less effort.

The tags I'm talking about are related to the <fieldset> tag. You can see an example of it on the directory page of the MU Homepage. Notice the borders around the forms? That's from the <fieldset> tag. It is a container for related information. Now, notice the labels for each one? These are defined with the <legend> tag. Add a <label> tag to all the form elements inside the fieldset and you're done. Not too shabby. Since these things are XHTML tags, you can easily style them with CSS and end up with something that looks great.

There is one problem that layout perfectionists may not like. It has to do with the <legend> tag. Web browsers do not display it exactly the same way. You're limited in the ways you can style margins and padding on this element, so you won't be able to get pixel perfect alignment or positioning. It's only a small difference and not worth pulling your hair out over.

If you're still a little unsure about fieldsets, A List Apart has a more in-depth article on the topic if you decide you need more info.

Now go forth and make those forms prettier and easier to use! Also, keep in mind that fieldsets aren't just limited to forms. They can go around any kind of grouped content.