CODEWITHSUNDEEP
htmlforms
newbie
newbie

Reputation: 24635

Best practice for making web forms

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

Upvotes: 16

Views: 17241

Answers (6)

James Campbell
James Campbell

Reputation: 5087

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

Upvotes: 1

BalusC
BalusC

Reputation: 1108802

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".

Upvotes: 4

D&#39;Arcy Rittich
D&#39;Arcy Rittich

Reputation: 171431

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:

Upvotes: 38

Tatu Ulmanen
Tatu Ulmanen

Reputation: 124778

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;
}

Upvotes: 5

Ian P
Ian P

Reputation: 12993

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

That has always worked well for me....

Upvotes: 6

Teja Kantamneni
Teja Kantamneni

Reputation: 17472

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

Upvotes: 2

Related Questions