Well...
Use the <fieldset> tag to collect related parts of the form together (if a large form).
Apply <legend> to help indicate what the form pertains to.
Ensure all Inputs have a <label> tag.
Also ensure all Labels/Inputs have unique IDs.
The label should go first for most inputs, (text, text area etc.), and last for things like Checkbox lists, radio groups etc.
Use the font-size tag for the Label/Inputs, using % or EM units.
Apply styling for :focus for inputs so that users can see which form element that are currently in (such as changing the BG colour or altering the Border Colour etc.).
(NOTE: doesn't work on IE6.)
Consider applying a little JS to enhance usability (autofocus the first part of a form and enable IE6 to use the :focus).
-------
If it helps....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head>
<title>Center Block Element 2</title>
<style type="text/css">
html
{
margin: 0;
padding: 0;
font-size: 100%;
font-family: trebuchet, arial, sans-serif;
}
body
{
margin: 0;
padding: 10px;
font-size: 62.5%;
}
form
{
margin: 0;
padding: 0;
width: 500px;
}
fieldset
{
margin: 0;
padding: 10px;
border: 1px solid #d6d6d6;
display: block;
}
legend
{
margin: 0 0 15px 0;
padding: 4px 8px;
border: 0px solid #d6d6d6;
font-weight: bold;
font-size: 1.6em;
background-color: #000000;
color: #ffffff;
}
.formelementwrappersingle
{
margin: 2px;
padding: 0;
float: left;
clear: both;
width: 40em;
border: 1px solid #c2c2c2;
background-color: #f6f6f6;
}
.formelementwrapperdoubleinline
{
margin: 2px;
padding: 0;
float:left;
width: 19em;
border: 1px solid #c2c2c2;
background-color: #f6f6f6;
}
.formelementwrapperdoublebreak
{
margin: 2px;
padding: 0;
float:left;
clear: both;
width: 19em;
border: 1px solid #c2c2c2;
background-color: #f6f6f6;
}
label
{
margin: 0;
padding: 3px;
font-weight: bold;
display: block;
width: 15em;
float: left;
font-size: 1.2em;
}
input.textinput, textarea.textarea
{
background-color: #ffff99;
font-size: 1.4em;
border: 1px solid #c2c2c2;
}
input.textinput:focus, textarea.textarea:focus
{
background-color: #ffffff;
font-size: 1.4em;
border: 1px solid #d6d6d6;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Test Form 1</legend>
<div class="formelementwrappersingle">
<label for="name">
Name
</label>
<input id="name" name="name" type="text" class="textinput" />
</div>
<div class="formelementwrappersingle">
<label for="description">
Description
</label>
<textarea id="description" name="description" class="textarea"></textarea>
</div>
</fieldset>
<fieldset>
<legend>Test Form 2</legend>
<div class="formelementwrapperdoubleinline">
<label for="colourchoice_0">
<input type="radio" name="colourchoice" id="colourchoice_0" title="Red" class="radioinput" checked="checked" />
Red
</label>
</div>
<div class="formelementwrapperdoubleinline">
<label for="colourchoice_1">
<input type="radio" name="colourchoice" id="colourchoice_1" title="Blue" class="radioinput" />
Blue
</label>
</div>
</fieldset>
<fieldset>
<legend>Test Form 3</legend>
<div class="formelementwrapperdoublebreak">
<label for="animalchoice_0">
<input type="radio" name="animalchoice" id="animalchoice_0" title="Cat" class="radioinput" checked="checked" />
Cat
</label>
</div>
<div class="formelementwrapperdoublebreak">
<label for="animalchoice_1">
<input type="radio" name="animalchoice" id="animalchoice_1" title="Dog" class="radioinput" />
Blue
</label>
</div>
</fieldset>
</form>
</body>
</html>