Dale estilo a tus formularios HTML con CSS

Un formulario es por norma general, un espacio de nuestra web que no gusta demasiado a los usuarios porque tienen que "perder su tiempo" en rellenar datos. Y generalmente, el usuario es perezoso a la hora de proporcionar informacin, motivo por el cual cuanto ms suculento y bonito sea un formulario ms probabilidades existirn de que lo cumplimenten. Es por esto que en nuestros sitios web es muy recomendable hacer que estos formularios sean cmodos de leer, espaciosos para escribir y estticamente adecuados al resto de la web. En un formulario podemos dar estilo a todos los elementos que lo componen sin problema alguno como si de cualquier elemento se tratase. Un formulario necesita tener una estructura visual slida y esto se consigue mayoritariamente utilizando elementos que ayuden a jerarquizar como por ejemplo los elementos del tipo fieldset, legend y labels. Lo ideal para empezar es escribir el cdigo sin estilos, comprobar que el formulario funciona perfectamente y empezar a dar el "look" que ms te guste. Recomendaciones a tener en cuenta:

Procura que los espacios en los que el usuario tenga que escribir sean amplios Intenta siempre de forma muy descriptiva dar instrucciones para rellenar el formulario, sobre todo si ste es largo o complejo. Los ejemplos ayudan bastante. Usa una tipografa estndar y ms bien grande, de palo que no cree confusiones y que sea fcil de leer, sobre todo en aquellos campos donde el usuario tenga que escribir.

Este sera un ejemplo grfico de jerarquizacin de un formulario utilizando los elementos mencionados:

Una vez vista la forma de ordenar los principales conceptos de un formulario vamos a darle vida a un formulario bsico mediante HTML y CSS. Este sera el cdigo HTML sin estilos y su apariencia inicial:
<div id="registro"> <fieldset> <form> <legend>Registro de Nuevo Usuario</legend> <label for="user">Usuario:</label> <input name="username " type="text" size="20" /> <label for="pass">Contrasea:</label> <input name="password" type="password" size="20" /> <label for="pass">E-mail:</label> <input name="email " type="text" size="20" /> <label for="pass">Nombre:</label> <input name="firstname" type="text" size="20" /> <label for="pass">Apellidos:</label> <input name="lastname " type="text" size="20" /> <label for="pass">Direccin:</label> <textarea name="address" cols="26" rows="3"> </textarea> <input name=" insert" type="submit" value="Aceptar" class="enviar"/> </form>

</fieldset> </div> </div>

A continuacin presentamos un ejemplo de formulario con estilos y el correspondiente cdigo de css: <fieldset id="registrousuario"> <form> <legend>Registro de Nuevo Usuario</legend> <label for="user">Usuario:</label> <input class="texto" name="username " type="text" size="20" /> <label for="pass">Contrasea:</label> <input class="texto" name="password" type="password" size="20" /> <label for="pass">E-mail:</label> <input class="texto" name="email " type="text" size="20" /> <label for="pass">Nombres:</label> <input class="texto" name="firstname" type="text" size="20" /> <label for="pass">Apellidos:</label> <input class="texto" name="lastname " type="text" size="20" /> <label for="pass">Direccin:</label> <textarea class="areadetexto" name="address" cols="26" rows="3"> </textarea> <br /> <input class="botonenviar" name="insert" type="submit" value="Enviar" class="enviar"/> </form> </fieldset> Cdigo para la hoja de estilos (CSS): #registrousuario { background:transparent url(../images/bgfieldset.jpg) no-repeat scroll left bottom; border:medium none; color:#333333; height:665px; padding:0 0 0 50px; width:515px; } #registrousuario legend { color:#333333; font-family:arial;

font-size:21px; letter-spacing:-1px; padding-bottom:20px; padding-top:8px; text-transform:capitalize; } #registrousuario input.texto { background:#FFFFFF url(../images/bginputtexto.gif) no-repeat scroll left top; border:medium none !important; color:#666666; font-size:12px; height:24px; padding-bottom:0; padding-left:5px; padding-top:5px; width:454px; font-family:arial,sans-serif; } #registrousuario textarea.areadetexto { background: #ffffff url(../images/bgtextarea.gif) no-repeat scroll top left; width: 454px; height: 212px; border:none !important; padding-bottom:0; padding-left:5px; padding-top:5px; color:#666666; font-size:12px; font-family:arial,sans-serif; } #registrousuario label { display:block; font-family:arial,sans-serif; font-size:14px; padding:10px 0 3px; } #registrousuario input.botonenviar { background:transparent url(../images/bgbotonenviar.gif) no-repeat scroll left top;

border:medium none !important; color:#FFFFFF; display:block; float:left; font-family:arial,sans-serif; height:30px; margin-left:360px; margin-top:20px; text-align:center; width:99px; }