Standard and Best practice in dealing with Muliple/Complex Columns with Forms

Question

I've want to know what is the best practice or approach in dealing with multiple and complex columns with a form inside.

here's an example of the form I'm dealing with

How to properly write a HTML markup for this? If I wrap every form element with a 'DIV' for every column it would take a lot 'DIVs' and styles; and the width for every column that is not repeating.

So what I did is, I put all form element in the table. And I think that is not the standard way to do it.

If your in my shoes,

How would you deal with the columns with non-repeating width?

Answer 1

There is no standard for complex forms, but there are plenty of blog posts claiming to have figured out the perfect way to approach this problem. Most of them are well thought out, but ultimately you have to pick the one you're most comfortable with. I have some suggestions though:

• Check out the US postal service change of address form. It's surprisingly well done

• If you have lots of forms, using a grid system like 960.gs, blueprint.css, or YUI grids (shudder) is an easy way to implement a form. However grid systems are definitely considered bloat if that's the only place you'll use them.

  • Do a search for "tableless forms" on Google. You will see a lot of different implementations. Choose the one you like.

Answer 2

I would probably put each form element in a list item within an unordered list (I think semantically, it is a list of input elements that need to be filled in.)

I would then add classes to them for positioning and width etc - the columned ones would need to be given a width and floated left...

so:

<ul>
   <li class="iName"><label for="name">Full name:</label><input name="name"/></li>
   <li class="iEmail"><label for="email">Email:</label><input name="email"/></li>
   etc etc...
</ul>

I believe this would be semantically correct and the most accessible way to do it.