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>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>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.
Si te gustó este artículo también te gustará...
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...
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.
Muy bueno el tutorial.
como hago para lo que se llene en ese formulario valla dirigido a mi mail
Muy bien el formulario, pero le falta validacion veo que tambien este formulario no lo tiene, pero me gusta tu formato
me gusto el comentario # 1 me puedes explicar por fa
haaay lo necesitaba ahora y los ejemplos tienen links muertos :(bueno, gracias de todos modos, voy a hacerlo
seria bueno que actualizaras los links a lso resultados. salu2
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.
muchas gracias! me ha servido mucho! exitos!
Muy bien, inicio con un sitio con puros divs y esto es muy buen material.
Me gusto el artículo, me ayudó bastante
DIOS MIO!! Estamos hablando de diseño!!!
Ponganse a investigar y a trabajar!!!
No quieren que el autor también desarrolle sus proyectos?????!!!!!
Veamos como queda...
FEOOOOOOOOOOOOOOOOOOOOOOOOOO
excelente aporte, es justo lo que buscaba para cambiar mi login arkaiko por este , lo demas que comentan del proceso de validacion y demas de los usuarios uff , investiguen , no es facil pero si se puede , les aseguro que aprenderan, lo digo porque realize uno sin saber la nada misma y me va todo bn , investiguen de sesiones en jsp es en dnde me desenvuelvo yo graxxxxxxxxxxxx *.*