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 use a table, but that doesn't work real well in a css oriented layout design. For example:

<table>
  <tr>
    <td>Name:</td>
    <td><input type="text" /></td>
    <td style="display: none" id="NameError">*</td>
  </tr>
  <tr>
    <td>Phone:</td>
    <td><input type="text" /></td>
    <td style="display: none" id="PhoneError">*</td>
  </tr>
  <tr>
    <td>Birthday:</td>
    <td><input type="text" /></td>
    <td style="display: none" id="BirthdayError">*</td>
  </tr>
</table>

This doesn't seem very CSS, but I am not sure how to use a css oriented layout to make this work right.

What would be considered best practice?

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)

<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 2

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>