Portable CSS Forms

Forms have always been a right pain to layout nicely. When tables where used to lay them out you always ended up with very complicated tables, with often ages spent dragging the table borders around in Dreamweaver in an attempt to get it to behave. The transition to table less CSS controlled layouts didn't seam to make things any simpler, with some people sticking to using tables to layout them, but using CSS to control the sizing etc.

There are many tutorials and Ideas around on the web for creating CSS forms. Having tried what seams like almost all of them, I have merged the best ideas from each in to my Portable Forms. So called because with this I can easily use almost exactly the same (fairly light) XHTML code (I just copy & paste the entire Form Container div) and make some minor tweaks to the CSS from one site to the next. Adding more fields is extremely simple, Even fairly complicated multiple column form layouts don't add too much extra code.

Simple Example

Below is a simple example showing the concept

HTML

<div id="form-container">
<form action="" method="post" enctype="multipart/form-data" name="form1" >
<p>
<label for="name">Name </label>
<span class="formw"><input type="text" name="name" class="singleline-field" id="name" />
</span></p>
<p><span class="formw">
<input type="submit" id="Submit" value="Submit" /></span></p>
</form>
<br class="clear" />
</div><!--/#form-container-->

CSS

#form-container{
float: left;
width: 300px;
margin-bottom: 8px;
}
#form-container form p {
width: auto;
clear: both;
height: auto;
margin: 3px 0 2px 0;
background-color: transparent;
}
#form-container form p label {
float: left;
width: 15%;
text-align: right;
margin-top: 5px;
}
#form-container form p span.formw {
float: right;
width: 83%;
text-align: left;
}
#form-container .singleline-field {
width: 250px;
height: 15px;
font: 11px Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 3px 0 3px 0;
}

Expatiation

The form-container div (which wraps round the entire form) can be named anything, so if the site is going to have multiple very different forms there isn't problem there and it's a easy way to 'target' all the HTML tags within the form without adding loads of classes to everything. The P tags keep the lines separate. The often overlooked label tag comes (which is useful for accessibility) in very handy here allowing to set a width of the field labels and float them left. The only 'extra' bit of HTML that is added is the span tag round the form fields, this allows us to to set a width to contain the field (I always find a few percent less than 'perfect' works best, i.e. the widths of the label and this span adding up to less than 100%)

Drawbacks:
I have found this code to be fairly rock solid, but there are some unforeseen drawbacks. As you can see above you really need to set a width for the actual form fields themselves, for some reason each different field is measured slightly differently i.e. if both select (drop down menu) and text (single line) fields have the same width set in the CSS, they end up slightly different lengths in the browser (and a file field, for uploading images for example is even worse). For a multiple column form (example linked below) the XHTML code isn't really in the correct order, this can be partly solved in the browser for entering information with the addition of 'tabindex' properties to the input tags, but if CSS is disabled the form field order my be out of sync

Full Examples

Single Column : Twin Column
View source on the resulting pages to see the XHTML and CSS, although I would recommend linking the CSS file for 'real life' use