Styling forms with CSS

[duncanbeattie]

Ok I am new here so apologies if this has been covered before.
I noticed a thread going over ways to style specific form elements and thought the following may be of interest.

When creating web forms I usually style the layout through css manipulation, say we have a simple form like

<form action="#">

	<fieldset>
		<legend>Some Details</legend>

		<div class="row">
			<label for="name">Your Name</label>
			<span class="formw">
				<input type="text" name="name" id="name"  size="25" />
			</span>
		</div>
			
		<div class="row">
			<label for="email">Your Email</label>
			<span class="formw">
				<input type="text" name="email" id="email"  size="25" />
			</span>
		</div>
		
		<div class="row">
			<label for="password">Your password</label>
			<span class="formw">
				<input type="password" name="password"  id="password" size="25" />
			</span>
		</div>
		<br />
	</fieldset>

	<span class="formw"><input type="submit" value="Send Message" /></span>
	<br />
</form>

You will note that along with the standard form elements I have used the <fieldset> tag which basically draws a rectangle around an area, the <label> tag which specifies lbel text for a specific form element and I have intorduced a custom div class named "row" and a custom span class called "formw".

All of these are reworked in my css file to create a nicely formatted form.

css

form
{
	width:400px;
	font-size:.75em;
	padding: 20px 15px 15px 20px;
	border: 3px #999 solid;
	-moz-border-radius:15px;
}
input, textarea, select
{
	font-size:inherit;
	font-family:Verdana, Arial, Helvetica, sans-serif; 
}
fieldset
{
	padding: 10px 15px 20px 30px;
	background: #E1E1E1;
	border: 1px #999 solid;
	margin-bottom:15px;
	-moz-border-radius:15px;
}
legend
{
	background: #fff;
	padding: 2px 6px;
	border: 1px #999 solid;
	-moz-border-radius:15px;
}
.row
{
  clear: both;
  padding-top: 5px;
}

label
{
  float: left;
  width: 100px;
  text-align: right;
}

.formw
{
  float: right;
  width: 235px;
  text-align: left;
}

Back on the html form you will see that after the final </div> I have added a single line break <br /> this too is altered via css to

br {	clear: both;	}

Since the divs and spans are floating we need to use clear so the containing element expands to house them.

Also the css control for the form, fieldset and legend elements contains

-moz-border-radius:15px;

which draws rounded corners, this will fail validation at present but according to mozilla it

was one of the proposals leading to the proposed CSS 3 border-radius property, which has not yet reached Candidate Recommendation

Some screen grabs from a few browsers available at -> duncanbeattie.com/images/browserForm.jpg , I haven't had a chance to get any from my pc yet so ie will probably need a bit of tweaking *sigh*

Hope this is of some help