Estás en Inicio / Editorial / CSS

21.04.2006

Estilizando Formularios

Por Oscar Alcalá | 14,570 Lecturas
Archivado en: CSS

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: ¿cómo se pueden estilizar los formularios?, debido a que en muchas ocasiones es la parte del sitio, que no queda de acuerdo al estilo del resto de los elementos.

En realidad la estilización de formularios es más simple de lo que parece, sin embargo, se necesita un par de trucos para adquirir la apariencia que se desea, además hay que tomar en cuenta que esta limitada por ciertas características que no todos los navegadores actuales soportan.

Para comenzar, lo primero que tenemos que hacer es el diseño de como queremos que se vea nuestro formulario. Desde este punto vamos tomar en cuenta muchas consideraciones que veremos más adelante y que para este caso no tomé en cuenta, con el propósito de 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, únicamente 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>
<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, así que no es necesario definirlos por el momento.

Estilizando

Aplicar estilos a formularios no es diferente de hacerlo con cualquier otro elemento, para empezar, vamos a agregar color al fondo de la página para ver como esta nuestro formulario inicialmente este primer paso .

body { background: #A0CE00; }

Como podemos ver nuestro formulario esta desordenado y no se bien. Lo primero que vamos a hacer es organizarlo, para facilitar después el resto del proceso. Vamos a desplegar las etiquetas como block para que se simulen los cambios de línea 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; }

Así es como se ve nuestro formulario actualmente, ya está organizado pero se sigue viendo simple y el siguiente paso será 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, sin 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í.

Lo siguiente será añadir las imágenes 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

Básicamente el formulario esta listo, vamos a agregar un pequeño efecto para que se vea aún mejor. Hice un par de imágenes 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 área 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.

Califica esta nota:

(3 votos, promedio: 4.67 de 5)

 Loading ...

• Todos los editoriales
• Aspectos técnicos
• Desarrollo Web
• Diseño
• Negocios
• Principiantes
• Navegando
• Semblanza
• Enviar colaboración

• Todas las notas
• Eventos
• Enviar colaboración

• Por países
• Por temática
• Sugerir empresa

• Todos los foros
• Diseño web
• Programación web
• Negocios web
• Temas generales
• Compartiendo
• Admistrando sitios
• Seguridad y Redes
• Archivo

• Acerca de
• Preguntas frecuentes
• Créditos
• Contacto

• Suscribirse
• Archivo de boletines

• AmigoMensajero
• Hostigg
• Hostigg (en)
• 120 segundos
• Últimos Temas
• Desarrollo Web
• Cristalab
• Blogs Chapines