CSS layouts for forms

We have been looking to replace a tables-based form layout with its CSS equivalent for some time. At last, we had a few spare hours and it was time to get rid of those pesky tables once and for all from a couple of websites. In the end, we found a solution but it’s not perfect and several other methods required more time to test than we had available. Here’s the story so far.

Should be easy, right?

It’s all been done before hasn’t it? There are several CSS layouts for forms available (1, 2). They are great methods but some seemed to require a lot of CSS rules to establish what should be a simple task and/or caused float problems for us.

We had a self-imposed time limit of a couple of hours. More time might have found a better method but we felt we had to set a time limit. After testing different methods, this one seemed relatively simple and worked the best in our case:

» Example CSS layout for a contact form

We adapted this layout but used <divs> instead of paragraphs (semantically, is it a paragraph?). We also required a textarea input field and this needed the submit input button to be positioned appropriately. We added <label> tags to associate fields with their text labels.

The addition of a <div> wrapping each <label> and <input> pair is not required in some other methods. In our experience, methods that floated <labels> and <inputs> caused problems and were not consistent across browsers. Some methods required clearing of floats which caused a few headaches in our case. This might just be a specific problem with the website we were testing on.

The form is only a start. We can add other accessibility features like legends and fieldsets later. Of course, we could have spent more time on this, but a few hours seemed like more than enough at this point.

One proviso, the layout has not been extensively tested in every single browser. However, it works fine with IE6, Opera 9 and Firefox 1.5 (mostly) on Windows XP.

Firefox problem

There’s a slight problem with Firefox 1.5 with the layout. The textarea field is not positioned correctly. It’s misaligned by about 0.2 em. To be honest, I’m not sure why that should be the case.

Send your answers on a postcard

All in all, what we thought would be easy was not straightforward. Testing different methods took a lot longer than we thought.

If you have a better solution, I’d be happy to hear it.

Update: CSS layouts for forms – tips and tricks describes our experience following on from this article.