Formularios basados en retículas CSS

30 julio 2007 ~ Software

La idea es definir la anchura de los campos del formulario basándonos en la etiqueta <label>. Esta etiqueta se utiliza para mostrar el nombre de cada campo y puede codificarse de dos maneras:

Una de ellas es aplicándole el parámetro for para relacionar cada label con el input/select/textarea que le corresponda.

<label for="nombre">Nombre:</label><input type="text" name="nombre />

La otra manera, que es la que utilizaremos aquí, es englobar el input/select/textarea dentro de una etiqueta <label>, de modo que ya no es encesario emplear el parámetro for para establecer la relación:

<label>Nombre:<input type="text" name="nombre /></label>

La maqueta basada en retícula supone, antes de nada, establecer la retícula. Para el ejempo usaré pixels, aunque puede hacerse también con porcentajes o con ems.

Vamos a maquetar un formulario de 300px de ancho basado en una retícula de 3 columnas, así que cada columna tendrá 90pixels de ancho y 10px de margen derecho.

Sobre esta retícula, podemos tener campos que ocupen 1, 2 ó 3 columnas, resultados campos de:

• ancho1 (100) = 90px + 10px de margen
• ancho2 (200)= 190 +10px de margen
• ancho3 (300)= 290 +10px de margen

Bueno, ya tenemos las premisas para empezar a construir nuestro CSS.

Primero, al formulario le daremos el ancho de la retícula que nos hemos propuesto: 300px, aunque puede tener más si nos conviene para la estética, añadir padding..: realmente el formulario no influirá en la retícula, lo ponemos así por un cuestión formal.

.formulario 
{padding:0; width:300px;overflow:hidden;}

Ahora, pondremos los labels a flotar para que se vayan apilando uno a continuación del otro. Les daremos un margen derecho de, por ejemplo, 10px para separar las columnas de la retícula del formulario. Además de esto, para que el apilamiento funcione bien, forzaremos la altura de los labels ya que los select y los inputs no pintan igual en IE, de modo que los bloques de labels, al tener distinta altura, no se apilarían bien. Le damos un poco más de lo que pensamos que tendrá de altura un label (un em para el texto, otro em para el input/select y otro em para que exista margen vertical entre cada renglón de campos).

.formulario label
{float:left; margin-right:10px; height:3em}

.ancho1 {width:90px;}

.ancho2 {width:190px;}

.ancho3 {width:290px;}

Sólo falta decirle a los inputs y selects que ocupen todo el ancho de su contenedor, ya que son realmente los labels los que están fijando la anchura de cada campo.

.formulario input, .formulario select, .formulario textarea 
{width:100%;}

Si decoramos los campos con un borde por CSS, debemos reducir un poco el ancho ya que IE sumará al 100% los pixeles del border desbaratándolo todo.

.formulario input, .formulario select, .formulario textarea
{border:1px solid blue; width:99%;}

Ahora sólo nos falta el botón de enviar. Para que haga juego con nuestros labels apilados, lo flotamos a la izquierda y le damos margen superior de 1em para compensar que el botón no lleva el texto de un <label> por encima.

.formulario button
{float:left; margin-top:1em;}

Total, nos quedaría algo así:

CSS

.formulario
{padding:0; width:300px;overflow:hidden;}

.formulario label
{float:left; margin-right:10px; height:3em}

.formulario input, .formulario select, .formulario textarea
{border:1px solid blue; width:99%;}

.ancho1 {width:90px;}

.ancho2 {width:190px;}

.ancho3 {width:290px;}

.formulario button
{float:left; margin-top:1em;}

XHTML

<form class="formulario" action="#">

<label class="ancho1">

Tratamiento:

<select name="tratamiento">

<option value="1">Señor</option>

<option value="2">Señora</option>

<option value="3">Señorita</option>

</label>

<label class="ancho2">Nombre:<input type="text" name="nombre"/>

<label class="ancho3">Apellidos:<input type="text" name="nombre"/>

<label class="ancho1">Edad:

<select name="edad">

<option value="niño">0-15 años</option>

<option value="joven">15-35 años</option>

<option value="maduro">35-60 años</option>

<option value="viejo">60 o más</option>

</select>

</label>

<button type="submit">Enviar</button>

</form>

Y este sería el resultado (añádase algún detalle CSS para dejarlo curioso):

Tratamiento: Señor Señora Señorita Nombre: Apellidos: Edad: 0-15 años 15-35 años 35-60 años 60 o más Enviar

nombre		Recordar
email *
http://
Mensaje
	* Tu email no se publicará

« Safari 3 ¿Beta? Amo Firebug, odio Dreamweaver »