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

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)

    Username
    

    Password
    

    

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

    Name
    

    Password
    

    D.O.B.
    
    
    

    

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!