Diseño de formularios con CSS y HTML

Actualizado el 09/05/2007 < > 6 Cometarios

Resúmen: Los formularios son parte importantes, pero poco elegantes, de muchos sitios. Aprendamos a diseñar formularios atractivos usando CSS y HTML.

Meneame Bitacoras

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;}

... continúa

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;}

...continúa

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;f

 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.

Meneame Bitacoras

Publicado el 09/05/2007, última actualización 09/05/2007.

Autor: Balú

URL: www.baluart.net

Añadir Comentario (Subir al texto)

6 Cometarios

  1. Hernán

    Excelente!!

    Viernes, 4 de abril 2008

  2. Jaime

    Gracias, pero algo no me quedo claro:
    Recordar mi nombre

    de usuario en esta computadora
    que significa el uso de for en ese contexto??

    Jueves, 14 de agosto 2008

  3. Christian

    Seria interesante que tambien pusieras una pagina de demostración del codigo que estas publicando.

    Martes, 31 de marzo 2009

  4. jose manuel

    Hola, agradecería información para conseguir que el cliente que rellena el formulario reciba una copia del mismo, previa solicitud de recibir copia del formulario con una casilla de verificación o el mismo e-mail. Gracias.

    Viernes, 2 de abril 2010

  5. tech

    interesantes ejemplos, estaria bueno que pusieras un enlace hacia ejemplos para faciltar la visualizacion, gracias por compartirlos.

    Martes, 22 de febrero 2011

  6. decoracion con globos

    Muchas gracias por los codigos, les voy a seguir ehcando un vistazo mas profundo, porque quiero hacer formularios elegantes.

    Saludos

    Jueves, 10 de noviembre 2011

(Subir al texto)

Añadir Comentario

* Campos obligatorios