Best practice for making web forms

Question

Is it ok to use tables to make web forms or should I use div's? I know how to use tables, but how should I make form with div's or is it better to use tables?

<form method="post">
    <table>
        <tr>
            <td>
                <label for="username">Username:</label>
            </td>
            <td>
                <input type="text" name="username" id="username"/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="password">Password:</label>
            </td>
            <td>
                <input type="password" name="password" id="password"/>
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" name="cancel" value="Cancel"/>
            </td>       
            <td>
                <input type="submit" name="send" value="Send"/>
            </td>
        </tr>
    </table>
</form>

Possible Duplicate: Why-not-use-tables-for-layout-in-html

Answer 1

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

Answer 2

There is no such hard and fast rule or better way of doing forms in HTML. If you want to use div's in an easy way, its better to choose a CSS framework to make things easy like blueprint

Answer 3

A rule to live by: Only use tables to display tabular data.

That has always worked well for me....

Answer 4

The absolutely best format for forms in my opinion is to use unordered lists inside fieldsets spiced up with labels. That's the most semantically correct way, anyways:

<form method="post" action="foo.php">
    <fieldset>
        <legend>Some fields</legend>
        <ul>
            <li>
                <label for="foo">Foobar</label>
                <input type="text" name="foo" id="foo" />
            </li>
        </ul>
    </fieldset>
</form>

The fieldsets aren't mandatory but can liven up an otherwise dull form. The basic CSS to get an ul look like a form might be something like this:

form ul {
    list-style: none;
    margin: 0;
}

form ul li {
    margin-bottom: 10px;
}

form ul li label {
    display: block;
    float: left;
    width: 150px;
    line-height: 24px;
}

Answer 5

For best HTML/CSS practices in general, I recommend to have a look at A List Apart. With regard to forms, here's an article which suits your need: Prettier Accessible Forms. For other examples, just google with keywords "semantic html form".

Answer 6

Tables are not for layout, tables are for data period, css is the way to go, that is best practice.