Estilizando formularios

Este es un artículo que te servirá de guía para crear formularios totalmente accesibles usando XHTML y hojas de estilo en cascada (css) para darle formato.
Una de las preguntas más frecuentes cuando se habla de diseño bajo css es como se pueden estilizar los formularios ya que en muchas ocasiones es la parte de un sitio que no queda de acuerdo al estilo del resto de los elementos. Por esto, en esta, mi primera colaboración para CSS Boulevar decidí que sería buena idea escribir al respecto.

En realidad la estilización de formularios es más simple de lo que parece, sin embargo, se necesitan de un par de trucos para adquirir la apariencia que se quiere la cual aún está limitada por ciertas características que no todos los navegadores actuales soportan.

Para comenzar, lo primero que tenemos que hacer es hacer el diseño de como vamos a querer que se vea nuestro formulario. Desde este punto vamos a tener que tomar en cuenta muchs consideraciones que veremos más adelante y que para este caso no tomé en cuenta a propósito por tratarse de un ejemplo en el que hay que resaltar estas limitaciones.

Aquí podemos ver una imagen del diseño inicial.

El Marcado

El código (X)HTML de este ejemplo no tiene mayor ciencia, unicamente se trata de un formulario con 4 campos, algo típico de un sistema de comentarios, queda algo como lo siguiente:

<form name="formulario" id="formulario" method="">
<label for="nombre">Nombre:</label> <input type="text" id="nombre" class="campo" />
<label for="email">E-mail:</label> <input type="text" id="email" class="campo" />
<label for="url">URL:</label> <input type="text" id="url" class="campo" />
<label for="comentario">Comentario:</label> <textarea id="comentario" class="campo"></textarea> <br />
<input type="submit" id="boton_enviar" name="enviar" value="Enviar" /> </form>


Lo único que hay que resaltar es la falta de definición del tamaño de los campos de texto, esto lo haremos por medio de CSS asi que no es necesario definirlos por el momento

Estilizando

Aplicar estilos a formularios no es diferente de hacerlo con cualquier otro elemento, para empezar, unicamente vamos a agregar color al fondo de la página para ver como esta nuestro formulario inicialmenteen este primer paso.
body { background: #A0CE00; }

Como podemos ver nuestro formulario esta desordenado y no se ve nada bien. Lo primero que vamos a hacer es organizaro, para facilitar despues el resto del proceso. Vamos a desplegar las etiquetas como block para que se simulen los cambios de linea además de definir un poco el estilo general del formulario.

form { padding: 50px; background: #84AA00; width: 250px; }
label { font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: #FFF; display: block; }
.campo { margin-bottom: 20px; }


Asi es como se ve nuestro formulario actualmente, ya está organizado pero se sigue viendo simple y el siguiente paso sera cambiarlo.

La primer parte importante para estilizar las cajas de texto es esconder lo que tenemos por default, esto nos va a permitir mas libertad ya que en realidad el truco nada más se trata de reemplazar las cajas con una imagen. Para que las cajas se escondan, si perder funcionalidad vamos a fundirlas con el color de fondo cambiando tanto los bordes como el fondo.

.campo { width: 254px; height: 30px; margin-bottom: 20px; border: 1px Solid #84AA00; background: #84AA00; }
#comentario { width: 294px; height: 193px; }


En este tercer ejemplo, nuestro formulario parece no existir, sin embargo si movemos el cursor un poco vemos que sigue estando ahí.

Ahora si llegó la parte divertida, lo siguiente será añadir las imagenes como fondo, un simple background-image bastará para lograr el efecto.

.campo { width: 254px; height: 30px; margin-bottom: 20px; border: 1px Solid #84AA00; background: #84AA00; background-image: url(f1.jpg); background-repeat: no-repeat; padding: 2px; color: #669966; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; }
#comentario { width: 254px; height: 193px; background-image: url(f2.jpg); background-repeat: no-repeat; }


Añadimos el atributo padding para que el texto no quede totalmente pegado a la imagen además de cambiar el color, tamaño y fuente del texto como detalles.

Lo único que nos falta es el botón de enviar, el proceso es el mismo, lo único extra en este caso es la indentación del texto en caso de que no se quiera que este se vea.

#boton_enviar { width: 88px; height: 27px; margin-left: 80px; background: #84AA00; border: 1px Solid #84AA00; background-image: url(boton.jpg); text-indent: -9999px; }

Extras

Basicamente el formulario esta listo, vamos a agregar un pequeño efecto para que se vea aún mejor. Hice un par de imagenes extra sin sombreado que se utilizan cuando el usuario pasa el cursor sobre la caja de texto.

.campo:hover { background-image: url(f3.jpg); }
#comentario:hover { background-image: url(f4.jpg); }


Si están utilizando un buen navegador, el efecto se ve sin problema alguno pero en Internet Explorer la situación es diferente ya que como sabemos, no reconoce el uso de hover en elementos que no sean enlaces, sin embargo, no hay ningún problema pues se sigue viendo la imagen inicial.

Aquí está nuestro ejemplo finalizado, pueden combinarlo con otros efectos como la decoración del drop-down menu para lograr formularios que se vean muy bien.

Como mencione al principio, nos encontramos aún con muchos problemas al estilizar formularios, en este ejemplo, podemos ver que las barras de scroll en el area de texto pueden llegar a verse mal y desafortunadamente estas no son estilizables más que en IE. Sin embargo, con un poco de imaginación y un par de sencillos hacks podemos lograr efectos para que los formularios vayan de acuerdo con el estilo del sitio.

Autor

Oscar Alcalá

Desarrollador web freelance

Compartir

Comentarios

Daniel

17/11/2005
Es sin duda un articulo bastante interesante, pero cuidado con probarlo en IE, que para variar, no se ve bien del todo, mi sugerencia es que los que pongan en practica este ejemplo, se aseguren de probar en diferentes navegadores. Eso por ahora... Saludos Sigan adelante... :)

Weirock

17/11/2005
El cambio mejora bastante la imagen del formulario. El unico problema surge cuando se introducen mas caracteres que el ancho, ya que la imagen se pierde. Es un buen punto para revisar.

Buen aporte.

Willy

27/11/2005
Puedes agregar otros tipos de campo como combo, chekbox y radio, cual seria la solución para tener compatibilidad completa con el IE, por ejemplo el textarea se descuadra cuando hay mas lineas de lo que aparece en pantalla.

walvaRo

16/1/2006
¿Como hago que el radiobutton tenga el fondo del color q yo quiera..?
Me refiero al fondo del interior del radiobutton..

¿Cómo hago que el punto negro q se activa al seleccionar el radiobutton sea tb de otro color, y no negro?

y en fin asi muchas preguntas..

mariafv

08/3/2006
Hay que tener cuidado con el boton "Enviar" no se ve bien en Explorer.¿ Alguna solución para esto?

Markos

26/3/2006
HOLA VIENDO SU EJEMPLO EN LA PARTE FINAL INDICA QUE LAS BARRAS DE DESPLZAMIENTO DEL TEXT AREA NO SON ESTELIZABLES...BIEN PUES YO TRATANDO DE HACERLO VI EN UNO DE MIS POBRES DISEÑOS QUE LAS BARRAS SE COLOREAN DE IGUAL FORMA QUE LAS BARRAS LATERALES DE LA PAGINA...MAS ME ENCONTRE CON QUE O PINTAS LA BARRA LATERAL DEL NAVEGADOR OPINTAS LA DEL TEXAREA QUE SE DEVERA??

David

06/6/2006
Esta muy bien, se pueden hacer formularios bonitos, pero faltan las imagenes del ejemplo.

miguel

20/7/2006
Es cierto, la imagen del boton no se ve muy bien con las letras de "Enviar" en explorer, pero eso es facil de corregir. El problema es que no dan las imagenes del ejemplo, razón por la cual toca hacerlas.. jeje.

miguel

20/7/2006
Se me olvidó decirlo en el comentario anterior, que pena. Para los que no lo han echo, para corregir en explorer la parte fea del botón enviar, solo debes quitarle el valor por defecto del botón y listo, solucionado
<input type="submit" id="boton_enviar" name="enviar" value="" />

Igual sucede con la barra del scroll. Saludos.

Rodrigo

31/5/2007
Corrijanme si me equivoco pero los estilos mostrados no se pueden aplicar a un campo select, la altura solo es modificable en Mozilla, pero en explorer parece no correr por nada, ademas el efecto de sombra que tienen los campos son parte de la imagen que cargaron para el fondo y no asi efecto del estilo, por lo demas parece ultilizable siempre y cuando no use menus en mi formulario ^^'.

manuel

13/7/2009
css textarea
mo esta mal

Alfredo

21/4/2010
Botón de enviar
Esta bueno el formulario, pero el botón de enviar te quedo feo.

¿como hago para que el formulario este girado 15º

israelpg

07/8/2012
Usar Firebug para copiar imágenes
Usando el Firebug se puede inspeccionar el código CSS y abrir en una ventana nueva la imagen que se desee copiar.

Ya tengo completo el ejemplo, queda bien.

Un saludo.