Bedtime Reading
Authentic Jobs
CSS layouts for forms - tips and tricks
24 May 2007
About a year ago, we replaced some webpage forms that used tables for layout with CSS-based layouts. Here's the blog post about it, CSS layouts for forms. To cut a long story short, we had some problems but eventually adapted this method to give this form.
Since then, all our forms have been CSS-based and gradually we have learnt more about CSS layouts for forms. Our preferred solution uses Andy King's method. In our experience, this works well with a variety of different CSS-based website layouts and our testing shows no major problems with different browsers.
Some tips might be useful here.
Tip 1 - Separate style sheets
This makes the form style sheet portable between website projects
I always put the CSS rules for my form in a separate style sheet. This makes the form style sheet quite portable between website projects and I can link to it from my form page and not from other pages. During early website development, this means I can concentrate on other things, rather than the form page. Later, I can amalgamate the form style rules with my main style sheet if I so wish. Additionally, a separate form style sheet helped me identify problems with one particular layout. This works great in my experience.
Tip 2 - Use different tools
..assess the problems before diving in with style sheet amendments
Use different style sheet tools to assess the problems before diving in with style sheet amendments. Personally, I use Dreamweaver as my main website development tool and its recent incarnations allow me to see style sheet rule inheritance (which rules get inherited from other elements) quite easily. I often found this quite difficult for CSS and forms in the past.
I also use Firebug a lot more for CSS these days. I use it to see how other websites style their forms. It's a great tool and I don't know how I got by without it.
Tip 3 - Read all about it
Set aside some time to read about CSS-based form layouts. Understand how they work. For example, The Art and Science of CSS by Sitepoint has a great chapter on form layout and styling with CSS. The chapter is available as part of the free download sample for the book.
Final tip. Find a layout that works for you. Stick with it. Familiarity helps.
