Dynamic Drive CSS Library- CSS Tableless Form

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

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.

The form is responsive in that it expands to take advantage of the full horizontal space of the page when the window is 480px or less, or that of most smart phones.

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-bottom: 1px dashed gray;
}

.cssform p:last-of-type{
border-bottom: none;
}

.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;
}

@media screen and (max-width: 480px){ /* responsive form settings, when window width is 480px or less */

	.cssform p{
		padding-left: 0;
		width: auto;
		padding-bottom: 1em;
	}

	.cssform label{
		float: none;
		display: block;
		margin-left: 0;
	}

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

</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: 06/10/2013 Form now responsive, adapting to windows 480px or less.

Usage Terms: Click here

Your Comments (189)

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 1 of 19 pages 1 2 3 > Last »

A nice and compact way of doing this. Although doing this with tables is easier, this may save bandwidth in the longrun.

*I recommend this.

Posted by Nathan on 06/21, 10:09 AM

Great coding, nice, compact. A good way to do this, and i don't think doing this with tables would take more bandwidth.

Greets!

Posted by Fabian Wojtowicz on 06/21, 07:27 PM

Very clean and simple presentation for forms. Well done!

Posted by Matthew C. Gallagher on 06/22, 04:01 PM

Nice work! Still, there are a couple of problems:
1. semantically there are no paragraphs (so P should not be used). A simple break would do to get a clear:left and a div could be used to wrap label and field.
2. The labels for checkboxes and radio buttons do not work. By work I mean: if you click them nothing happens. Clicking a label should toggle the field. Click on agree to terms to see what I mean.

I created a page myself where I collected form styling methods and will mention your technique.

See http://michiel.wordpress.com/2006/02/09/floating-forms/

Posted by Michiel van der Blonk on 06/26, 09:35 AM

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

Posted by aaron on 06/27, 04:07 AM

how do i get the feedback to a email from the submit button?

Posted by aaron on 06/27, 04:08 AM

this is nice...thanks for code!!!

Posted by Lily on 06/27, 05:02 AM

The labels most certainly do work, at least in FX 1.5.0.4.
I think the paragraphs are required for validity, though I could be mistaken.

Posted by Twey on 06/28, 01:17 PM

The tags are not needed in this situation ... but they are extremely useful when using CSS since you can easily define styling to any text within the paragraph tag.
... and in regards to this taking less bandwidth, CSS coding will ALWAYS produce less code than using the traditional table methods, especially if used correctly. It may only be a few kilobytes here and there, but when a site starts getting 1000+ hits a day, it can start to add up. Plus CSS is easier to work with due to the separation of code (if using external CSS files, which is the only correct way to do it).

Visit CSS Zen Garden for proof.

Posted by Dustin Halstead on 07/04, 01:51 PM

ROFL, there are days when you are so happy to have woken up ... and to have become hilarious in seconds about stupid bugs like this one (the 3px hack). Thank god there are sharp people out there to push the level up :)

Posted by XaS on 07/07, 08:02 AM

Comment Pages 1 of 19 pages 1 2 3 > Last »

Commenting is not available in this weblog entry.