Best practice for layout forms in html - table or stream?

Question

What is considered best practice for laying out forms in html? In particular, where you have a set of fields with labels and possible error indicators. The best I can do is to use a table, but this does not work very well in CSS oriented layout design. For instance:

<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 is not like CSS, but I'm not sure how to use a CSS-oriented layout to make this work correctly.

What is considered best practice?

Answer 1

I don’t know about you guys, but I don’t use a lot of markup for the layout of the form.

Here is the markup for a simple log form (without 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 the 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 css, the label element clears to the left (and floats to the left). This means that the label will float with its mate input , however each label will be a new line.

This makes it VERY EASY to add additional inputs. Even post verification messages

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">DOB</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> 

Using 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's really that simple:)

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

Answer 2

Use actual <label> elements for field labels, which is also useful for ease of use, and use them correctly with CSS.

For instance,

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

Then in your CSS, you can style the LABEL elements with, for example, display:block and the width of your desire, and the corresponding clear values.

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

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

Answer 3

It can be argued that the form is tabular data, so the table is acceptable. According to David, the main problem is that you want to use the appropriate LABEL tags.

In your example, I'm not sure what you get from using the table through CSS.

Answer 4

Best Practice = NEVER use a table for layout.

You can try the CSS framework as our 960 grid layout.

Answer 5

“Best practice” is to use a table for what it wants to do ( present data ) and use a combination of div, span or other elements to style your input form.

Answer 6

Send your answer to your next question here, as it will most likely be closed as a duplicate.

I'm not sure how good browser support is on this, tested in FF4: http://jsfiddle.net/shanethehat/7h3bC/11/

 <div id="tableForm"> <div class="tableRow"> <div class="tableCell"> <label for="mycheckbox"> Tick me if you dare</label> </div> <div class="tableCell"> <input type="checkbox" name="mycheckbox" id="mycheckbox"> </div> </div> <div class="tableRow"> <div class="tableCell"> <label for="mytext"> Give me some text test test</label> </div> <div class="tableCell"> <input type="text" name="mytext" id="mytext"> </div> </div> </div> div#tableForm { display:table; } div.tableRow { display:table-row; } div.tableCell { display:table-cell; width:inherit; } 

Yes, I know, I just created a table using a div. The fact is that it is well accessible and semantically correct.

Edit: with an error in IE7, where a fixed width would be the only way, but 8 and 9 look fine.

Edit2: switched the labels / fields around and set the correct alignment: http://jsfiddle.net/shanethehat/7h3bC/12/ . At the moment, the markup is getting a little heavy. :first-child would be an alternative to using the left class, but at the cost of IE8.