Best practice for form layout in html — table or flow?

Question

What is considered the best practice for laying out forms in html? Specifically where you have a set of fields with labels, and possible error indicators. The best I can do is u

Answer 1

Use actual <label> elements for field labels, which is good for usability too, and style them appropriately using CSS.

For instance,

<label for="name">Name</label> <input type="text" name="name">

Then in your CSS, you could style LABEL elements with, e.g., display:block and a width of your desire, and appropriate clear values.

For tickbox / radio inputs, the input itself should be inside the <label> element - this means that the label itself should be clickable to select that input, for instance:

<label for="mycheckbox"> <input type="checkbox" name="mycheckbox"> Tick me if you dare</label>

Answer 2

One can argue a form is tabular data, so a table is acceptable. As David states, they main issue is that you want to use proper LABEL tags.

In your example, I'm not sure what you gain from using a table over CSS, though.

Answer 3

"Best Practice" would be to use a table for what it's meant to do (represent data) and use a combination of div, span or other elements to style your input form.

Answer 4

I don't know about you guys, but I don't use much markup for form layout.

Here is the markup for a simple log in form (no layout markup i.e. divs, tables, etc)

<form method="post">
    <label>Username</label>
    <input type="text" name="username" />

    <label>Password</label>
    <input type="password" name="password" />

    <input type="submit" name="Log In" />
</form>

Here is CSS for the form

label,input{float:left}
label,input[type="submit"]{clear:left}

Here is the result

The amazing thing about this is:

• Lack of markup
• Lack of CSS
• Flexibility

If you look at the css, the label element is being cleared left (and floated left). Meaning that the label will float with its fellow inputs however every label will be a new line.

This makes it VERY EASY to add extra inputs. Even validation messages after inputs

Take this form for example

<form method="post">
    <label>Name</label>
    <input type="text" name="username" />

    <label>Password</label>
    <input type="password" name="password" />

    <label><abbr title="Date of Birth">D.O.B.</abbr></label>
    <input type="text" name="dob_day" />
    <input type="text" name="dob_month" />
    <input type="text" name="dob_year" />

    <input type="submit" name="Log In" />
</form>

With this CSS

label,input{float:left}
label,input[type="submit"]{clear:left}
input[name^="dob_"]{width:44px;margin:2px}
label{width:70px}

We get

It really is that simple :)

Using this concept, you create a huge number of possibilities, and you'll never have to use a table for layout again!

Answer 5

Best Practice = NEVER use table for layout.

You can try CSS framework like blueprint our 960 grid system.