Diseñando Formularios con CSS (I Parte)

baluart22 Mayo 2005 - 12:00am 16 comentarios
Enviar por Email Imprimir

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&ntilde;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.

Formularios con Diseño CSS

Como puedes ver, lo mas interesante es observar como ocultamos una capa div (ocultando el checkbox y el texto) mediante la propiedad display.

Comentarios

Imagen de PablukY

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... 

Imagen de Balú

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.

Imagen de prueba
prueba

Muy bueno el tutorial.

Imagen de dfs
Imagen de delaron
delaron

como hago para lo que se llene en ese formulario valla dirigido a mi mail

Imagen de luis
luis

Muy bien el formulario, pero le falta validacion veo que tambien este formulario no lo tiene, pero me gusta tu formato

Imagen de JAIME
JAIME

me gusto el comentario # 1 me puedes explicar por fa

Imagen de kndlaria

haaay lo necesitaba ahora y los ejemplos tienen links muertos :(bueno, gracias de todos modos, voy a hacerlo 

Imagen de shawn

seria bueno que actualizaras los links a lso resultados. salu2

Imagen de Anonymous
Anonymous

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.

Imagen de juanma

muchas gracias! me ha servido mucho! exitos!

Imagen de oziel
oziel

Muy bien, inicio con un sitio con puros divs y esto es muy buen material.

Imagen de Anonymous
Anonymous

Me gusto el artículo, me ayudó bastante

Imagen de Kingslayer
Kingslayer

DIOS MIO!! Estamos hablando de diseño!!!
Ponganse a investigar y a trabajar!!!
No quieren que el autor también desarrolle sus proyectos?????!!!!!

Imagen de Pumizzaa
Pumizzaa

Veamos como queda...

FEOOOOOOOOOOOOOOOOOOOOOOOOOO

Imagen de Anonymous
Anonymous

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 *.*

Tutoriales

Cómo descargar videos de VK.com
En este artículo voy a explicar como descargar videos y películas...
Descargar Facebook Móvil Gratis
Por si aún no lo han hecho, es posible descargar Facebook Móvil...
Cómo generar tráfico web con las redes sociales - Paso a Paso
Muchas empresas están publicando contenidos como la forma de crear...

Artículo Recomendado

3 Tips cruciales para recuperar archivos eliminados
¿Te imaginas perder el trabajo de toda una semana en tan solo unos segundos? Todos hemos pasado por este problema. Quizás eliminamos por error un archivo importante o lo borramos sin pensar que era valioso para otro... más