Dynamic Drive CSS Library- CSS Tableless Form

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Social Media Applications

Advertise Here

CSS Library: Form CSS: Here

CSS Tableless Form

Author: Dynamic Drive

This is a tableless CSS form which you can use as a template for implementing your own lightweight form. It uses a combination of float and negative margins to create a two column layout for the form. One issue with the form is IE6's three pixel jog bug, which is addressed in the demo manually, by offsetting the jogged checkboxes with an additional margin. You may wish to implement a more thorough fix, though it will increase the size of the code. IE7 does not suffer from the 3 pixel bug.

Demo:

The CSS:

<style type="text/css">

.cssform p{
width: 300px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 1%;
}

.cssform label{
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
}

.cssform textarea{
width: 250px;
height: 150px;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
}

</style>

The HTML:

<form id="myform" class="cssform" action="">

<p>
<label for="user">Name</label>
<input type="text" id="user" value="" />
</p>

<p>
<label for="emailaddress">Email Address:</label>
<input type="text" id="emailaddress" value="" />
</p>

<p>
<label for="comments">Feedback:</label>
<textarea id="comments" rows="5" cols="25"></textarea>
</p>

<p>
<label for="comments">Sex:</label>
Male: <input type="radio" name="sex" /> Female: <input type="radio" name="sex" /><br />
</p>

<p>
<label for="comments">Hobbies:</label>
<input type="checkbox" name="hobby" /> Tennis<br />
<input type="checkbox" name="hobby" class="threepxfix" /> Reading <br />
<input type="checkbox" name="hobby" class="threepxfix" /> Basketball <br />
</p>

<p>
<label for="terms">Agree to Terms?</label>
<input type="checkbox" id="terms" class="boxes" />
</p>

<div style="margin-left: 150px;">
<input type="submit" value="Submit" /> <input type="reset" value="reset" />
</div>

</form>

Code Info

Rate this code:

Date Posted: 06/20/2006

Revision History: None

Usage Terms: Click here

Your Comments (132)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.