Resource Guide To - Website Development & Design

INDEX 2:  Creating Forms - Everything About Forms

 

Building Forms With Tables

Knowing the elements that make up a form, isn't enough to create good form. You must also know how to assemble those elements into a form that is easy to navigate and understand. 

Four examples for better layouts

In basic user interface design there are four steps that will make the layout and presentation of your forms much easier: using tables.

While tables are your best layout friend in general, they are particularly useful in forms, since element alignment is crucial to creating attractive forms.

Consider this simple form:

 

Name: 



  Address: 



  City: 

 

  State: 



  Zip: 



  Phone:  

You've seen these kinds of forms all over the place, not an appealing approach:

Name: Address: City: State: Zip: Phone:

1. Not only is this form hard to read, it's hard to navigate, and not pleasing. To make life easier, use tables to place the field labels in one column and the fields themselves in another. The result is much more attractive:

Name:
Address:
City:	State: Zip:
Phone:

2. To make things even more readable, place the labels in bold-faced type and align right. This creates space that naturally leads the eye to the most important part of the form, making it easy to find and move from field to field:

Name:
Address:
City:	State: Zip:
Phone:

3. If you want to adjust the spacing around elements, use the CELLPADDING and CELLSPACING attributes on your table to expand and shrink your form. Here is the same form, with 4 extra pixels of cell spacing:

Name:
Address:
City:	State: Zip:
Phone:

4. When using tables you can also use the alignment attributes:left right,center using the cell within the table. Here is the same table using these attributes:

Name:	Centered
Address:	Default (is aligned left)
City:	State: Zip: Right
Phone:	Left

*Using tables with your forms not only makes things line up, it has the added benefit of working no matter which font the user selects. Tables naturally scale based on their contents, so you can alter the form and still be assured that things will come out looking neat and tidy.

Other tricks

Forms are much easier to deal with if you can fit them in one page. If you can't, try to keep them as short as possible, breaking them over multiple pages as required. Nothing is more annoying than encountering a form on the Web that requires you move down the page half a dozen times before getting everything filled out.

Breaking forms across multiple pages makes life much more difficult for the server-side processing scripts.But, if you must create long forms, use horizontal rules (<HR>'s) and headings to break the form up into easily understood sections. Users are much more comfortable completing one section, with visual aids, then moving on to the next section by scrolling. This keeps your users from being overwhelmed by large forms.

 << BACK

Home | Website Creation | Site Promotion | Contact Us | About Ecommerce