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.

Comment Pages 11 of 14 pages « First < 9 10 11 12 13 > Last »

This is semantically wrong code as forms should be done using ordered lists.

You are also missing fieldsets as well as using inline CSS which is bad practice.

Posted by Jason Grant on 02/25, 03:13 AM

how can u customize this from the newest post - to oldest??? pls some1 reply

Posted by eizu on 02/29, 07:56 AM

Didn't work for me in FF2, when the label text wanted to be deeper than the inputs; only because the bottom border cut through the text though.
My version below, works so far in IE6/7, FF2:

<fieldset>
<label for="fish"> Fish </label>
<div>
<input name="fish" id="fish" type="checkbox" value="haddock" > Haddock

<input name="fish" id="fish" type="checkbox" value="cod" > Cod
</div>
</fieldset>

Cutdown CSS:

fieldset label {width:250px; float:left;}
fieldset div {float:left;}

Posted by Andy on 03/04, 07:24 AM

This is showing cramped on the page, viewing it with ie 7. Also is it possible to adjust backgrounds and add a border stc..? Which i need for my site
Philippine Real Estate

Posted by John on 04/08, 05:32 AM

Thanks for this - I've been looking for a form for ages that is decent.

Posted by Free software downloads on 04/08, 07:15 AM

Thanks for the Script, It is very useful script.

Posted by Gazebo - Music Videos India on 04/19, 09:30 PM

how do i get the submit button to send it to me?

Posted by kv on 05/13, 05:22 PM

as far as i've read through all the pages, some people did tell but those, i don't understand x_x

Posted by kv on 05/13, 05:38 PM

For the complainers, I don't believe this form was intended to be a solve-all-solution. It's more of a starting point for you to lace your pre-existing & currently-working form with a css skin. It works like a dream for me. Awesome!

Posted by Erskin E. Hansen on 05/20, 08:06 AM

Hello

I'd like to use this code since it looks great, the problem I have is that labels are not displayed, boxes are aligned to the left, but no labels for my boxes.

Thanks

Posted by Enrique Meza on 05/20, 10:43 PM

Comment Pages 11 of 14 pages « First < 9 10 11 12 13 > Last »