Diseñando Formularios con CSS (I Parte)
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>
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>
Como puedes ver, lo mas interesante es observar como ocultamos una capa div (ocultando el checkbox y el texto) mediante la propiedad display.
Hola!!!Queria que me explicaran como crear un login para usuarios en el que indicaran como y donde debo de poner los usuarios y las contraseñas para que este compruebe que son correctas y las paginas a las que son redireccionados cuando lo ponen correctamente y cuando no lo ponen correctamente.Gracias!!!! Espero su respuesta...
- responder
Enviado por PablukY (no verificado) el Mié, 04/05/2006 - 04:12.Hola PablukY, todavÃa no hemos publicado algún artÃculo sobre un sistema de login en php. Acabas de darme un buen tema que complemente éste. Seguramente en unos dÃas estaré escribiendo un mini tutorial al respecto. Muchas gracias por el comentario. Saludos.
- responder
Enviado por Balú (no verificado) el Jue, 04/06/2006 - 11:02.Muy bueno el tutorial.
- responder
Enviado por prueba (no verificado) el Jue, 05/18/2006 - 08:34.- responder
Enviado por dfs (no verificado) el Dom, 01/14/2007 - 12:38.como hago para lo que se llene en ese formulario valla dirigido a mi mail
- responder
Enviado por delaron (no verificado) el Lun, 03/19/2007 - 15:03.Muy bien el formulario, pero le falta validacion veo que tambien este formulario no lo tiene, pero me gusta tu formato
- responder
Enviado por luis (no verificado) el Mar, 08/21/2007 - 14:02.me gusto el comentario # 1 me puedes explicar por fa
- responder
Enviado por JAIME (no verificado) el Lun, 01/07/2008 - 16:53.haaay lo necesitaba ahora y los ejemplos tienen links muertos :(bueno, gracias de todos modos, voy a hacerlo
- responder
Enviado por kndlaria (no verificado) el Jue, 01/24/2008 - 08:31.seria bueno que actualizaras los links a lso resultados. salu2
- responder
Enviado por shawn (no verificado) el Lun, 02/11/2008 - 14:21.Este tutorial serÃa muy útil para una persona con pocos conocimientos en el tema, si se pudiera:
1.- Descargar el tutorial para su consulta en cualquier momento...
2.- si se pudiera ver ¡realmente! los ejemplos...Los enlaces dan una página de error...
En esta condiciones actuales, es muy poco útil.
- responder
Enviado por Anonymous (no verificado) el Mié, 04/02/2008 - 06:15.muchas gracias! me ha servido mucho! exitos!
- responder
Enviado por juanma (no verificado) el Jue, 05/15/2008 - 13:44.Muy bien, inicio con un sitio con puros divs y esto es muy buen material.
- responder
Enviado por oziel (no verificado) el Vie, 08/01/2008 - 20:04.Deja tu comentario