WebzCom.com your online resource for small business

CSS form Layouts

I had recently decided to make better use of CSS to layout the forms on FinditClassifieds.com. FinditClassifieds.com is one of the oldest nationwide classified advertising sites online today. This site was launched back in in1997 has had many updates and code patches through out the years. Although, I had done a major overhaul of the site in 2003, many web standards have been updated and it is almost time to review the site again to see what needs to be done to bring the code up to date.

I used Google to find some articles and samples of forms that used CSS for layout. I had found a good articles at themaninblue.com and webcredible.co.uk.

It has been a while since I've sat down and coded a form by hand and there are some new CSS tools the really make a difference when laying out forms today as oppossed to the old table layouts I used a few years ago. I've downloaded and backward engineered the code from the examples from the sites listed above and here are some of my thoughts about the code.

The "fieldset" tag is probably the biggest difference in the code. The fieldset tag is use to seperate groups of information. The fieldset element draws a box around its containing elements.

<fieldset>
Notice the border drawn around the text? This is an example of the fieldset tag .
</fieldset>