CSS layouts for forms - tips and tricks

Posted in on 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.

Update: Top 5 resources for building contact forms

Technorati : , ,

Related Posts

Comments

Textile Help
Stop looking at my bottom