Formulario HTML con CSS

El formulario de datos. Sin duda un clásico y viejo conocido de la web. Pocos sitios hay en internet que no lo incluyan en sus diseños por una u otra razón.
Un ejemplo de código para un formulario de datos sería este:

<form name="formulario" action="#" method="post">
	<fieldset>
		<legend>Datos de contacto</legend>
		<label for="nombre">Nombre:</label>
		<input type="text" size="35" maxlength="50" />
		<label for="apellidos">Apellidos:</label>
		<input type="text" size="35" maxlength="50" />
		<label for="email">e-mail:</label>
		<input type="text" size="35" maxlength="50" />
		<label>Opciones:</label>
		<input id="radio1" name="radio" type="radio" checked /><span>Opción 1</span>
		<input id="radio2" name="radio" type="radio" /><span>Opción 2</span>
		<label id="comentarios" for="comentarios">Comentarios:</label>
		<textarea name="comentarios" rows="5" cols="25"></textarea>
	</fieldset>
	<fieldset>
		<input type="reset" id="limpia" value="Limpiar" />
		<input id="envia" type="submit" value="Enviar" />
	</fieldset>
</form>

Sin estilos, la verdad es que queda un poco feo y soso...

Datos de contacto




Opción 1
Opción 2

Aplicando un poco de CSS quedaría un poco más vistoso:


Datos de contacto




Opción 1
Opción 2



¡Ya esta! esto es solo un pequeño ejemplo pero aún así se ha logrado mejorar la apariencia de nuestro formulario.

Aquí dejo el css aplicado al formulario:

<style type="text/css">

form {
 width:378px;
 margin:0;
 padding:0px 0px 8px 0px;
 background-color:#f0f0f0;
 border:1px solid #88aaaa;
 font-family:"Tahoma";
}

form fieldset {
 width:350px;
 margin:8px;
 padding:5px;
 border:1px solid #aaaaaa;
}

form fieldset legend{
 padding:5px;
 color:#aaaaaa;
 font-weight:bold;
 font-size:13px;
}

form fieldset label {
 display:block;
 float:left;
 width:25%;
 font-size:11px;
 margin-top:10px;
 color:#777777;
}

form fieldset label#comentarios {
 clear:both;
}

form fieldset input {
 display:block;
 float:left;
 width:70%;
 margin-left:10px;
 margin-top:10px;
}

form fieldset input#limpia {
 width:100px;
 margin-top:3px;
 margin-left:55px;
}

form fieldset input#envia {
 width:100px;
 margin-top:3px;
 margin-left10px;
}

form fieldset input#radio1, form fieldset input#radio2 {
 float:left;
 width:5%;
 height:20px;
}

form fieldset span {
 float:left;
 width:20%;
 margin-top:10px;
 margin-left:3px;
 color:#777777;
 font-size:10px;
}

form fieldset textarea {
 display:block;
 float:leftwidth:70%;
 margin-left:10px;
 margin-top:10px;
}

</style>