View Full Version : CSS Forms

04-21-2010, 04:44 PM
Can anyone tell me how to go about making something like this in CSS? How can get the form lists to show in a left right column like that in CSS? Are floats involved? Need serious help.

04-21-2010, 04:47 PM
Perhaps this article will get you where you want. You'll have to dive into the code to see how it's done.

04-22-2010, 03:53 PM
Thanks that did help out a lot. One more thing however. Does anyone know a way on how to put these form boxes into straight rows?

http://img709.imageshack.us/img709/8994/form1l.th.jpg (http://img709.imageshack.us/i/form1l.jpg/)

Here's my code

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<style type="text/css">
body {
background-color: #666600;
color: #BLACK;
font-family: Arial, Helvetica, sans-serif;
#theform {
#theform fieldset {
height: 20em;
width: 16.7em;
border: 0;
padding: 1em;
float: left;
margin: 0;
#theform fieldset legend {
font-size: 1em;
font-family: Georgia, "Times New Roman", Times, serif;
color: BLACK;
#theform fieldset legend span {
display: none;
#theform fieldset label {
font-size: 0.7em;
display: inline;
line-height: 0.5em;
#theform fieldset input {
font-size: 0.6em;
height: 1.9em;
width: 14em;
border: 1px solid #6D5C8B;


<!--[if IE]>
<style type="text/css">
#theform #pt4 {
padding: 2em 1em 1em 1em;

<!-- This empty script is used to ward off the aptly titled Flash of Unstyled Content
(or FOUC) which pops up in the various Internet Explorer browsers. For more info,
refer to http://www.bluerobot.com/web/css/fouc.asp -->

<div id="theform">

<fieldset id="pt1">
<legend><span>Step </span>CREATE NEW ACCOUNT <span>: Login details</span></legend>
<label for="username"><span style="color: Red;">*</span> User Name</label>
<input type="text" id="username" tabindex="1" />
<label for="password"><span style="color: Red;">*</span> Password</label>
<input type="text" id="password" tabindex="2" />
<label for="confirmpassword"><span style="color: Red;">*</span> Confirm Password</label>
<input type="text" id="confirmpassword" tabindex="3" />
<label for="firstname"><span style="color: Red;">*</span> First Name</label>
<input type="text" id="firstname" tabindex="4" />
<label for="middleinitial"><span style="color: Red;">*</span> Middle Initial</label>
<input type="text" id="middleinitial" tabindex="5" />
<label for="lastname"><span style="color: Red;">*</span> Last Name</label>
<input type="text" id="lastname" tabindex="6" />
<label for="company"><span style="color: Red;">*</span> Company</label>
<input type="text" id="company" tabindex="7" />
<label for="industry"><span style="color: Red;">*</span> Industry</label>
<input type="text" id="industry" tabindex="8" />
<label for="title"><span style="color: Red;">*</span> Title</label>
<input type="text" id="title" tabindex="9" />
<label for="howdidyouhereaboutus?"><span style="color: Red;">*</span> How did you hear about us?</label>
<input type="text" id="howdidyouhereaboutus?" tabindex="10" />
<fieldset id="pt2">
<legend><span>Step </span><span style="color: Red;">*</span>* Indicates required field</legend>
<label for="email"><span style="color: Red;">*</span> Email</label>
<input type="text" id="email" tabindex="1" />
<label for="phone"><span style="color: Red;">*</span> Phone</label>
<input type="text" id="phone" tabindex="2" />
<label for="mobile"> Mobile</label>
<input type="text" id="mobile" tabindex="3" />
<label for="fax"> Fax</label>
<input type="text" id="fax" tabindex="4" />
<label for="address"><span style="color: Red;">*</span> Address</label>
<input type="text" id="address" tabindex="5" />
<label for="address2"> Address 2</label>
<input type="text" id="address2" tabindex="6" />
<label for="city"><span style="color: Red;">*</span> City</label>
<input type="text" id="city" tabindex="7" />
<label for="state"><span style="color: Red;">*</span> State</label>
<input type="text" id="state" tabindex="8" />
<label for="zip"><span style="color: Red;">*</span> Zip</label>
<input type="text" id="zip" tabindex="9" />
<label for="Country"> Country</label>
<input type="text" id="Country" tabindex="10" />





04-23-2010, 03:58 AM
Nevermind. I got it.