We all know that tables are evil and you run the risk of being seriously uncool if you are caught using them. But when it comes to forms they really make cross browser layouts that much easier, which is why there are so many forms that use tables. In the interest of good standards based design I have created a form based on fieldsets and definition lists.

There are actually a few points to mention:

• Definition lists are used to layout name/value pairs,
• jquery validation modified from this article,
• a conditional stylesheet has been used to please that other browser,
• the sliding doors technique has been used to style the submit button,
• Eric Meyer’s css reset was used to initialise defaults across browsers,
• Required fields denoted by a star just by adding a class to the dt tag.

This form has been tested in all the major browsers: ie6+, firefox and chrome.

The Demo