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.

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 (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 5 of 19 pages « First < 3 4 5 6 7 > Last »

Also I would like to know how to write the coding for a page for submitting comments and show in immediately on the return page.

Posted by kash on 12/30, 09:38 AM

This question has been popping up EVERYWHERE, and nobody is answering it:

How do we get this form to be submitted to your e-mail address so that whatever someone types in there is sent to your e-mail?

Posted by Kudos on 01/04, 02:31 AM

grrrr will folk STOP asking about how to make a form submit content - this is a page relating to the LAYOUT of form elements and NOT the workings of a form - http://www.w3.org/TR/html4/interact/forms.html should explain all you need to know about forms.

My question relates to the labelling of the checkboxes and radio buttons - these are labelled as for "comments" is this correct or just a workaround to get the labels aligned correctly?

Posted by blueghozt on 01/09, 06:20 AM

I've experimented with putting two <label> groups within a single to create a different asthetic. Ane xample would be First Name and Last Name as seperate fields that I wanted to be on two adjoining lines without a dotted line break.

It seems to work fine, except when I change the input type from "text" to "password". Nothing else changes except text and password but the second field groups itself with the first label for some reason.

It doesn't happen if I switch it back to a text field. Anyone have any ideas.

Posted by Andrew on 01/10, 04:32 PM

Hi. I am pretty new to all this. I have implemented the script from this site into my css style sheet and my .htm page. All looks fine. Can any one provide me with some script that I can add to the current script to let me perform the following:

SUBMIT button sends the form data to an e-mail account and when this has been clicked the page gets redirected to a thank you page.

Hope someone can help!

Thanks, John

Posted by John on 01/12, 04:55 AM

Very nice, the code was very helpful

Posted by Biju on 01/30, 04:14 AM

We did a test in our dept: css vs tables.
While everyone says css is the way to go... the guys using tables finished the required forms long before the css guys AND all file sizes were smaller.
So even though i am learning css, i am yet to be convinced its an actual improvement.
As for the seperate code from style argument - this was a good idea when we all had slow connections. Superfast internet will soon be in everyones reach.
And i have yet to see any css website that regularly changes the style without having to fiddle with the code.

Posted by GeniusJon on 01/30, 04:52 AM

I have never done a form before I like how this looks but need help in getting the information send to my email.

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

Posted by Robert Teetz on 02/04, 05:35 PM

trial and error now.....I have enjoy learned

Posted by aryhamzah on 02/16, 07:29 PM

I have been trying to do the E-mail form, and when I try to use it it does not email me back. What do I do?

Here's what I have:

<form id="myform" class="cssform" action="mailto:martial_arts@yahoo.com">

Name:
<INPUT NAME="username" size="30">

E-Mail Address:
<INPUT Name="usermail" size="30"><BR>

Telephone Number:
<INPUT Name="usertelephone" size="30">

<H3>Make any requests you'd like below:</H3>
<textarea NAME="comment" ROWS=6 COLS=60></textarea>

<INPUT TYPE=submit VALUE="Send it!">
<INPUT TYPE=reset VALUE="Start over">
</FORM>

Posted by Hunter Gladstone on 03/11, 03:37 PM

Comment Pages 5 of 19 pages « First < 3 4 5 6 7 > Last »

Commenting is not available in this weblog entry.