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

This has been beaten to death. Couldn't you have searched for "divs vs tables" on here..or anywhere, for that matter..before posting? — ryeguy, Jan 29 '10 at 20:02
Possible duplicate of [Why not use tables for layout in HTML?](https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) — Cœur, Jul 10 '18 at 13:02

D'Arcy Rittich · Accepted Answer · 2010-01-29T19:56:28.990

38

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:

edited Jan 29 '10 at 19:56

answered Jan 29 '10 at 19:47

D'Arcy Rittich

167,292
40
290
283

9

There are good reasons to use div-based layouts, but they're *way* more brittle than tables. Tables are much more predictable, controllable and consistent across browsers. – Draemon Jan 29 '10 at 19:55
9

@Draemon: I disagree, e.g., if you have your labels to the left of inputs, and are asked to put them above the inputs instead, you need to reconstruct your whole table, which is a huge PITA. With CSS, you can make a one line change and you are done. – D'Arcy Rittich Apr 19 '10 at 15:26
2

And if you're asked to put them on the right? Or beneath? In general you can't make such layout changes in CSS alone. If your source is formatted sanely it's a 2 minute job to rearrange in any decent editor, with either method, definitely not a "huge PITA". – Draemon Apr 24 '10 at 09:56
I strongly agree with RedFilter. We build many websites with lots of forms and all of our layout is CSS based. CSS is far more flexible. Tables are easier for those new to understand and work with, but most of the real html pros use CSS based layouts. – Anthony Gatlin May 20 '12 at 13:24

score 6 · Answer 2 · answered Jan 29 '10 at 19:51

6

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

That has always worked well for me....

answered Jan 29 '10 at 19:51

Ian P

12,840
6
48
70

3

Aren't forms just tabular data where some of the cells/fields are for you to fill in? – Draemon Jan 29 '10 at 19:56
Eh.. Take it or leave it, I'm just saying it's always worked well for me :) – Ian P Jan 29 '10 at 20:00
2

To clarify -- I do not consider a form as being tabular data. – Ian P Jan 29 '10 at 20:01
Tabular implies repetition of a business data type, such as Customer. A table has many Customer objects. A name-value pair is a view (view model maybe) data type, not a business data type. – ProfK May 01 '10 at 16:40
@Draemon NO forms are not tabular data, forms are forms. They are for data collection, for user input, and this is very different to achieving an organized display of existing informtaion. – itsricky Feb 28 '13 at 23:22
@itsricky look at typical paper forms. They're tabular. Why is the organised presentation of existing information so different from the organised presentation of information you want to collect? – Draemon Mar 01 '13 at 10:43
Because there's two objectives there, and they deserve different presentation methods. You could argue that is why HTML has a element, and a element. The goal of a table is to allow calm, balanced analysis, and even, organised layout of existing information, often complex. The Goal of a **form** is to collect data from a user, in return for something, like a membership, or goods. Forms may look good if you emulate a table based layout, but if you're just putting one cell on each row, then that's not truly tabular. You can do better than that with CSS. Do you agree?
– itsricky Mar 06 '13 at 04:11

score 5 · Answer 3 · answered Jan 29 '10 at 19:51

5

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

answered Jan 29 '10 at 19:51

Tatu Ulmanen

123,288
34
187
185

Doesn't that get awkward (or lose some of its elegance) if/when there are multiple columns? – D'Arcy Rittich Jan 29 '10 at 19:53
Forms shouldn't have multiple columns, that's not very user friendly. You can easily put several inputs next to each other for example for first and last name, though. – Tatu Ulmanen Jan 29 '10 at 20:03
3

Please tell my clients that "forms shouldn't have multiple columns". HA! – Diodeus - James MacFarlane Jan 29 '10 at 20:40
2

@Diodeus - Yes, you can lead a horse to water but you can't make it think. :) – MikeSchinkel Aug 04 '11 at 22:28

score 3 · Answer 4 · answered Jan 29 '10 at 19:56

3

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

answered Jan 29 '10 at 19:56

BalusC

1,082,665
372
3,610
3,555

A List Apart is arguably the very best blog on Web design best practices. Great resource! Nice links also. Thanks for sharing. – Anthony Gatlin May 20 '12 at 13:31

score 2 · Answer 5 · answered Jan 29 '10 at 19:49

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

answered Jan 29 '10 at 19:49

Teja Kantamneni

17,402
12
56
86

score 1 · Answer 6 · answered Jan 29 '10 at 19:59

1

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

answered Jan 29 '10 at 19:59

James Campbell

5,057
2
35
54

I agree. Tables are never never never for layout. They are only for easily displaying data which might need to be displayed in a tabular or grid-style arrangement. Even then, we sometimes use CSS for this. While it takes a little effort to master CSS, it is well worth it. – Anthony Gatlin May 20 '12 at 13:33

Best practice for making web forms

6 Answers6

Linked

Related