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 12 of 14 pages « First < 10 11 12 13 14 >

A nice and compact way of doing this.
but it is not support to monzila.

Posted by jagannath on 06/06, 12:05 AM

how do i get this form to send the feedback in a email to my id?

Posted by Rizwan on 06/14, 01:27 AM

Awesome code! works well on FF2 & 3, IE6 + 7 ...but when it comes to IE8 ...everything mess up ... any fix for that ?

Posted by Poundy on 06/17, 09:23 PM

can we do the same thing for asp.net controls also

Posted by Jenitha on 06/26, 11:23 PM

Im wondering too, how do i add a the submit button to an email address so that the following fields are submitted to an email address? This would be a great help thanks :D

Posted by Softy on 07/02, 01:48 PM

Hi,

Thank you o much, I have been searching for this few weeks now.

Works Great :-)
Emil

Posted by Emil on 07/04, 12:12 AM

What exactly happens to the information once it is submitted?

Posted by Frisby on 07/04, 08:58 AM

Great job. I like this form. Very simple and nice.

Posted by Maqsood on 07/26, 04:26 AM

this might sound like a stupid question but how do you usethis sort of CSS to only show up on one page of your site? The same question applies to doing an image gallery?

Posted by danielle on 07/29, 12:59 PM

we can do like:
<style>
dl {
font-family:Arial, Helvetica, sans-serif;
padding: 0;
margin:10px 0 0 15px;
width: 540px;
float:left;
}
dt, dd {
padding: 2px 3px;
margin: 0;

}
dt {
width: 180px;
float: left;
clear: both;
}
</style>

I m using it:
<dl>
<dt>Name</dt>
<dd>Box</dd>

</dl>

Posted by funsansar on 07/31, 05:26 AM

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