views:

75

answers:

2

Hi,

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

http://img96.imageshack.us/img96/5658/complexform.jpg

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?

A: 

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.

Paul
I also used and liked that approach But when you got a lot of columns you would have to nest a lot of <ul> inside of <li> to create sub column. Thanks!
Pennf0lio
Hi there,You should only need one ul for the whole form. in the above example you would simply set the class for iName to width:100px; float:left; and the class for iEmail to width:120px; float left; (or whatever the measurements are. the next li can have a width of 100% of the ul, so you have 2 columns for the first row, 1 column for the next...semantically you only have one list of forms
Paul
(when I said one list of forms, I meant one list of input controls and labels)
Paul
A: 

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.
Mike Robinson
"Check out the US postal service change of address form. It's surprisingly well done" I really Agree on that. The markup is really clean. I think I would stick to that approach. Thank You Mike!
Pennf0lio