Interaction Hero

03.31.08 : 1 comments

Advanced form layout

If your work is anything like mine, then you often run into applications that use large, complicated forms. In cases like this it’s not really practical to use the standard form layout of labels on the left, inputs on the right, because the page would be ridiculously long and leave all kinds of ugly white space on the right side of the page. (White space that will most likely prompt the business owners to complain about wasted space.) The easiest solution to this problem is to layout your form in multiple columns.

When deciding to layout your forms this way, you can do it one of two ways. Each snippet (which is what I’ll call a label and a corresponding form element for ease of understanding) can flow from left to right, or top to bottom.

Which option is best is for you to decide. (Personally, I prefer the left to right.) Though the content can certainly help drive it. For example, if your snippets are short and there are a manageable number of them (30 or less), you can flow them top to bottom. If they’re long and unwieldy, try left to right. As for the snippets themselves, I feel that placing the label above the input is not only good practice (see Luke W.‘s article on form layout), but it also frees up horizontal space.

To drive the point home, here’s an example of a form I built with multiple columns.

Since every form is different there really isn’t a hard and fast rule for how you layout yours. But, using this technique should help you keep them under control.

Responses to this article

Leave a comment