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

I feel delighted to read such a good post, I would like to thank the Author for this marvelous efforts.this post is good in regards of both knowledge as well as information. Thanks for the post.

Posted by LasVegas Personal Injuries on 01/14, 04:05 AM

Really its a interesting post, I always enjoy reading such posts which provides knowledge based information

Posted by San Diego Personal Injury on 01/15, 04:08 AM

Awesome article - concise and correct. I would like to thank the author for shearing the information and Congratulate him for this brilliant piece of work.

Posted by seattle Personal Injury on 01/16, 04:48 AM

This site is one of the best web designing site, Thanks for the information.

Posted by Marco-Iowapersonalinjurylawyers on 01/27, 02:49 AM

出会い愛知出会い秋田出会い青森出会い千葉出会い愛媛出会い福井出会い福岡出会い福島出会い岐阜出会い群馬出会い広島出会い北海道出会い兵庫出会い茨城出会い石川出会い岩手出会い香川出会い鹿児島出会い神奈川出会い高知出会い熊本出会い京都出会い三重出会い宮城出会い宮崎出会い長野出会い長崎出会い奈良出会い新潟出会い大分出会い岡山出会い沖縄出会い大阪出会い佐賀出会い埼玉出会い滋賀出会い島根出会い静岡出会い栃木出会い徳島出会い東京出会い鳥取出会い富山出会い和歌山出会い山形出会い山口出会い山梨出会い北九州出会い下関アクセスカウンター

Posted by daddd on 01/30, 08:48 PM

Thanks for the post. What do you all think of the future of blogging? I have been reading a lot about google's attempt to gain preferential treatment for its site from internet providers. This will result in their sites being faster than sites owned by in

Posted by Emelie-New York personal injury lawyers on 02/05, 02:34 AM

The good guy is someone who radiates good vibes to others and is not psychotic about doing his own thing.:-)
Software Computers - unique catalogue of new useful computers software products with detailed description.

Posted by Computers Software on 02/10, 12:25 AM

Thanks, Very interesting read, I’ve been really enjoying checking up your posts from time to time. Looking forward to see your future posts smile.

Posted by Computers Software on 02/10, 03:18 AM

Toronto, ON wow gold(Sports Network) -wow gold Kobe Bryant finishedwow power leveling with 36 pointsworld of warcraft gold, and had a crucialwow gold basket and rebound inbuy wow gold the final minute towow gold lead the Los Angeles Lakerswow gold to a 115-107 win overwow gold the Torontowow gold Raptors.

Posted by ljhha on 02/11, 03:46 AM

Wholesale Silver Jewelry Thailand & Sterling Silver Jewelry

Posted by Jewelry Stores on 02/20, 06:16 AM

Comment Pages 3 of 4 pages < 1 2 3 4 >

Commenting is not available in this weblog entry.