En este artículo, veremos la variedad de caminos con los cuales podemos hacer formularios atractivos para nuestros sitios y servicios web usando sencillamente CSS.
Los formularios son parte importantes, pero poco elegantes, de muchos sitios. CSS hace más fácil la creación de formularios atractivos rápidamente, porque una vez que se ha desarrollado un diseño lo podemos reproducir en cada formulario del sitio.
Usando CSS, podemos cambiar muchas cosas sobre el aspecto de nuestros formularios y los elementos dentro de ellos; podemos redefinir la etiqueta de HTML que controla estos elementos, o podemos aplicar las llamadas clases css a estas etiquetas.
El uso de las etiquetas <fieldset> y <legend> son una gran manera de mantener relacionada la información de un formulario. Pues son reconocidas por distintos navegadores, incluso dispositivos únicamente de texto. Caso distinto sería si simplemente relacionamos el formulario en un <div>; los usuarios de un navegador estándar verían la relación, pero los que usen otros tipos de navegadores no.
En este caso, vamos a crear un sencillo formulario de registro o login, el código atendiendo lo antes dicho sería:
<div id="formulario">
<form method="post" action=" ">
<fieldset>
<legend>Registrarse</legend>
<div class="medidas">
<label for="user">Usuario: </label>
<input id="user" name="user">
</div>
<div class="medidas">
<label for="pass">Contraseña: </label>
<input type="password" id="pass" name="pass">
</div>
<div class="check">
<input type="checkbox" id="remember" name="remember">
<label for="recordar">Recordar mi nombre de usuario en esta computadora</label>
</div>
</fieldset>
<div>
<input type="submit" id="login" value="Ingresar">
</div>
</form>
</div>
Puedes verlo pulsando aquí.
Como ven, <fieldset> y <legend> son mostrados con un estilo por defecto en los navegadores, como son otras etiquetas de HTML. El estilo de defecto rodea a los elementos agrupándolos dentro de una caja, la etiqueta de leyenda (<legend>) aparece en la cima de aquella caja.
Ahora bien, vamos a usar CSS para dar un diseño estas etiquetas, cambiando el padding, márgenes, color,botón, así como el estilo del texto de leyenda.
Dentro de las etiquetas <head></head> definimos:
<style type="text/css">
body{font: 76% Arial, sans-serif;}
form{width:240px;padding:5px 0;border: 2px solid #C6E9FF;
background: #CEF3FB;}
fieldset{border: 0px solid #000;}
legend{font: bold 140% Arial,sans-serif;color: #27518A;}
Ahora definimos las medidas del div que contiene al formulario, tanto el margen, ancho y alto.
div.medidas,div.check{margin: 10px 0 10px 10px;}
div.medidas label{float:left;width:90px;line-height:23px;}
div.medidas input{width:120px;}
Finalmente, modificamos el botón de submit, fíjate como lo hacemos, al haberle dado una id (“login”) en el código html, ahora para referirnos solamente a ese botón precisamos su id.
input#login{margin-left: 100px;border: 1px solid #27518A;
background: #ccc url(fondoBoton.jpg) repeat-x;}
</style>
Veamos el resultado
Ahora diseñemos otro, uno más angosto, como para ponerlo en el menú lateral de todo el site.
<style type="text/css">
body{font: 12px Arial, sans-serif}
form{width: 120px;border: 1px solid #C6E9FF;background-color: #CEF3FB;
color: #000;text-align: center}
fieldset{border: 0px solid #000;}
legend{color: #304A78;font-weight:bold;margin:5px 0 0 15px;}
div.medidas{margin:5px 0}
div.medidas label{display:block}
div.medidas input{width:100px}
div.check{display:none}
input#login{margin:5px 0;border: 1px solid #27518A;
background: #ccc url(fondoBoton.jpg) repeat-x}
</style>
Veamos como queda.
Como puedes ver, lo mas interesante es observar como ocultamos una capa div (ocultando el checkbox y el texto) mediante la propiedad display.
