How Do I Format a HTML Form Without Using Tables

How Do I Format a HTML Form Without Using Tables

I know it's bad to use HTML Tables for everything... and that tables should be used only to present tabular data and not to achieve some style goal.

My question is, how do you make HTML forms with CSS so they look nice and aligned like when using tables?

What's the difference between these two methods of linking a html page to a css file?


CSS Trick to show border on table and cells when cells are not empty and show no border otherwise
Nick Rigby wrote an excellent article for A List Apart titled Prettier Accessible Forms.
word wrap in css / js
Uses fieldset, legend, label.

Changing the stylesheet of a nested page at runtime
Highly semantic..
How to apply a line wrap/continuation style and code formatting with css

Is it possible to stop Visual Studio 2008 from failing to build on CSS errors?

ASP.NET sites, hiring external design firms and standards


How to align checkboxes and their labels consistently cross-browsers
Take a look at the code used in wufoo forms, they use ul's to format the forms and they look really good..


You can try and strip the form as far back as possible and make do with the <label> and various form input elements as needed with a lean on the clear:left; attribute in the CSS.. This would make sure each line starts anew without having to wrap each line of the form in an extra <div> or <p> or even making a list out of it..
.formlabel{     clear:left;     display:block;     float:left;     margin:0 0 1em 0;     padding:0 0.5em 0 0;     text-align:right;     width:8em; }  .forminput{     float:left;     margin:0 0.5em 0.5em 0; }  .formwarning{     clear:left;     float:left;     margin:0 0.5em 1em 0; } 
Here's a sample HTML form showing examples of various input types and an extra validation message that you can hide or style as needed:.
<fieldset><legend>Details</legend>     <label for="name" class="formlabel">Name</label>       <input id="name" name="name" type="text" class="forminput" />       <div class="formwarning">Validation error message</div>      <label for="dob_year" class="formlabel">DOB</label>       <div class="forminput">         <input id="dob_year" name="dob_year" type="text" size="4" /> /         <input id="dob_month" name="dob_month" type="text" size="2" /> /         <input id="dob_day" name="dob_day" type="text" size="2" />       </div>      <label class="formlabel">Sex</label>       <label for="female" class="forminput">Female</label>         <input id="female" name="sex" type="radio" class="forminput" />       <label for="male" class="forminput">Male</label>         <input id="male" name="sex" type="radio" class="forminput" />      <label for="state" class="formlabel">State</label>       <select id="state" name="state" class="forminput">         <option>ACT</option>         <option>New South Wales</option>         <option>Northern Territory</option>         <option>Queensland</option>         <option>South Australia</option>         <option>Tasmania</option>         <option>Victoria</option>         <option>Western Australia</option>       </select>      <label for="deadseal" class="formlabel">Death certificate</label>       <input id="deadseal" name="deadseal" type="file" class="forminput" /> </fieldset> 
In the above example, the DOB does have an extra <div> cluttering things up.

You could get rid of it if you style up the date slashes as part of the :after pseudo-element where needed.. Turns out okay in Opera 11.60, Firefox 11, Google Chrome 18 and Internet Explorer 8..


I would lookup using the div tag to layout data on a page.. Tables are still very much useful for tabular data, but its frowned upon for laying out a page.. View source here on, there's probably some good examples..


Think about putting field names above the field, rather than beside.

I find this works about the best..


<form> <div id="personal_name"> <label>Name</label> <input name="name" /> </div> </form> 
form {display: table} #personal_name {display: table-row} #personal_name input, #personal_name label {display: table-cell} 
I think this is enough..

70 out of 100 based on 80 user ratings 730 reviews