[nick2price]

incorrect

This post has been edited by nick2price: 25 June 2012 - 09:49 AM

[kentlucky]

Don't use tables, that's a very brittle, non-semantic layout, use proper CSS layout. Below are some presentations that explain some good approaches to form layout, including usability considerations. The first link is more about the code, and the second more about design and usability considerations:

Learning To Love Forms (Web Directions South '07)

Best Practices for Form Design

I hope it helps

Quote

Good HTML forms require attention on at least four points:
Semantics
Accessibility
Functionality
Design

Forms can be difficult and sometimes even annoying for users;
often, a form interrupts a user’s main focus and direction on a page:
they’re intent on purchasing that gift, or trying out your new web app,
not giving you their shipping address or coming up with yet another password.
These tips will make forms easier for you as a developer/designer, and
them as a user.

Semantics

1 : Use fieldsets to encapsulate similar fields
Generally, forms are made up of inputs inside form tags. When you’ve
got a lot of fields that the user must fill out, it can be easier for
both the user and you, the developer, to keep track of input by using
fieldsets. The perennial example of this is using fieldsets to separate
a billing address and a shipping address.

<fieldset>
    <span>Billing Address</span><input type="text" />
    <span>City</span><input type="text" />
    <span>Province</span><input type="text" />
    <span>Postal Code</span><input type="text" />
</fieldset>

<fieldset>
    <span>Shipping Address</span><input type="text" />
    <span>City</span><input type="text" />
    <span>Province</span><input type="text" />
    <span>Postal Code</span><input type="text" />
</fieldset>

2 : Label Fieldsets with Legends
It hardly makes sense to use a fieldset without giving it a clear name.
We can improve the code above by using the legend element to title our
fieldsets. The fieldset element has a border by default, and the legend
will lay itself over that border.

<fieldset>
    <legend>Billing Address</legend>
    <span>Address</span><input type="text" />
    <span>City</span><input type="text" />
    <span>Province</span><input type="text" />
    <span>Postal Code</span><input type="text" />
</fieldset>

This results in the following:

Click here to read more

This post has been edited by modi123_1: 20 June 2012 - 07:02 AM
Reason for edit:: added quote tag