Dynamic Drive CSS Library- Corporate CSS Tableless form

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Form CSS: Here

Corporate CSS Tableless form

Author: Dynamic Drive

This is an elegant tableless CSS form template with a decidedly corporate look and feel. The most commonly used form elements with corresponding legends are added in to get you up and going quickly. Structurally the CSS form is made up of two "columns"- a left stylized "legend" column, plus a right DIV column enclosing the actual form field. Both columns are floated "left" and then put inside a "row" DIV that equalizes the two columns' divergent heights so the tallest one wins out.

Demo:

The CSS:

<style type="text/css">

.feedbackform{
padding: 5px;
}

div.fieldwrapper{ /*field row DIV (includes two columns- Styled label column and 'thefield' column)*/
width: 550px; /*width of form rows*/
overflow: hidden;
padding: 5px 0;
}

div.fieldwrapper label.styled{ /* label elements that should be styled (left column within fieldwrapper DIV) */
float: left;
width: 150px; /*width of label (left column)*/
text-transform: uppercase;
border-bottom: 1px solid red;
margin-right: 15px; /*spacing with right column*/
}

div.fieldwrapper div.thefield{ /* DIV that wraps around the actual form fields (right column within fieldwrapper DIV) */
float: left;
margin-bottom: 10px; /* space following the field */
}

div.fieldwrapper div.thefield input[type="text"]{ /* style for INPUT type="text" fields. Has no effect in IE7 or below! */
width: 250px;
}

div.fieldwrapper div.thefield textarea{ /* style for TEXTAREA fields. */
width: 300px;
height: 150px;
}

div.buttonsdiv{ /*div that wraps around the submit/reset buttons*/
margin-top: 5px; /*space above buttonsdiv*/
}

div.buttonsdiv input{ /* style for INPUT fields within 'buttonsdiv'. Assumed to be form buttons. */
width: 80px;
background: #e1dfe0;
}

</style>

The HTML:

<form class="feedbackform">

<div class="fieldwrapper">
	<label for="username" class="styled">Your Name:</label>
	<div class="thefield">
		<input type="text" id="username" value="" size="30" />
	</div>
</div>

<div class="fieldwrapper">
	<label for="email" class="styled">Email address:</label>
	<div class="thefield">
		<input type="text" id="email" value="" size="30" /><br />
		<span style="font-size: 80%">*Note: Please make sure it's correctly entered!</span>
	</div>
</div>

<div class="fieldwrapper">
	<label for="somehighschool" class="styled">education:</label>
	<div class="thefield">
		<ul style="margin-top:0;">
		<li><input type="radio" id="somehighschool" name="education" value=""/> <label for="somehighschool">Some Highschool</label></li>
		<li><input type="radio" id="highschool" name="education" value="" /> <label for="highschool">Highschool graduate</label></li>
		<li><input type="radio" id="somecollege" name="education" value="" /> <label for="somecollege">Some college</label></li>
		<li><input type="radio" id="vocation" name="education" value="" /> <label for="vocation">Vocation school</label></li>
		<li><input type="radio" id="college" name="education" value="" /> <label for="college">College graduate or higher</label></li>
		</ul>
	</div>
</div>

<div class="fieldwrapper">
	<label for="html" class="styled">Skills:</label>
	<div class="thefield">
		<ul style="margin-top:0;">
		<li><input type="checkbox" id="html" name="skills" value="" /> <label for="html">HTML/ CSS</label></li>
		<li><input type="checkbox" id="javascript" name="skills" value=""/> <label for="javascript">JavaScript</label></li>
		<li><input type="checkbox" id="ajax" name="skills" value="" /> <label for="ajax">Ajax and XML</label></li>
		<li><input type="checkbox" id="php" name="skills" value="" /> <label for="php">PHP and Database</label></li>
		</ul>
		<span style="font-size: 80%">* Please check all that apply.</span>
	</div>
</div>

<div class="fieldwrapper">
	<label for="agegroup" class="styled">Department:</label>
	<div class="thefield">
		<select id="agegroup">
		<option value="2.1">HR department</option>
		<option value="3">Sales</option>
		<option value="4.1">Customer Service/ Support</option>
		<option value="5.2">Accounting</option>
		</select>
	</div>
</div>

<div class="fieldwrapper">
	<label for="about" class="styled">About yourself:</label>
	<div class="thefield">
		<textarea id="about"></textarea>
</div>
</div>

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

</form>

Code Info

Rate this code:

Date Posted: 11/27/2008

Revision History: None

Usage Terms: Click here

Your Comments (32)

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

Awesome! Keep the forms coming!

(btw, it'd be great if there were some cool submit/reset button images accompanying them)

Posted by AMNET CSS on 11/30, 03:30 PM

If you are going to use a list to display the radio buttons and checkboxes, at least style them without showing the bullets.

As you have it, they are a little odd and disorienting.

Posted by Greg on 12/02, 10:58 AM

Agreed with comment above (@ Greg). Form elements with list bullets shouldn't be used. Aesthetically isn't pleasing. Otherwise a good corporate feel to the form and nicely coded (except the list style)

Posted by Osiris on 12/06, 02:00 PM

I think it looks very clean. Going to use the concept on my site in different colors.

Posted by Pappas Piano on 12/06, 11:48 PM

mgk kfls;

Posted by mody23 on 12/17, 06:34 PM

Check out my web site at http://expressions.sharepointsite.net

DO NOT ADD A WWW because it wouldn't work. I have added some Dynamic Drive content and want you to give some feedback at my homepage.

Posted by Eric on 12/17, 08:08 PM

First, thank you... this is awesome!!! So I've placed a little newsletter on my website (using your html code but modified to remove what I dont need). But how do I gather what users enter? That is, when someone enters an email... where does it go? Can I have the submit button send the info entered to my email address? Sorry if this is a silly question, i'm a novice.

Posted by Shane Spitzer on 12/17, 11:22 PM

You have to use a server-side scripting language, such as php. If you give me the html you're using, I can write the script for you.

first, the form tag would need something like this:


<form class="feedbackform" action="process.php" method="post">

then it would look something like this:

<?php
$name = $_REQUEST['username'] ;
$email = $_REQUEST['email'] ;
...
mail('youremail@domain.com',$sub,$msg,$header)
...
?> 

you have to have php installed on your server as well. for that, you would have to check with your host.

Posted by KBjr on 12/18, 05:25 PM

fdsfds=s
fs'd
fdsf
dsf
dsf
dsf
dsfdsf

Posted by rajkumar on 12/22, 12:28 AM

salut

Posted by driss on 12/23, 02:27 PM

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

Commenting is not available in this weblog entry.