Formularios sin tablas

Mucha gente me ha comentado que son incapaces de hacer un formulario complejo sin usar tablas para alinear los elementos del formulario. Yo siempre digo que todo es posible con css y a continuación voy a explicar como podemos hacer formularios sin tablas de una manera sencilla.

En este ejemplo lo veremos claro:

Si echais un vistazo al código vereis que no uso tablas para dibujar este formulairo. He usado un HTML simple para que se vea mucho mejor el ejemplo. He añadido un <br> despues de cada input debido a que los navegadores antiguos no lo meten despues de cada input al contrario que los nuevos.


<form>

<label for="nombre">Nombre</label>
<input id="nombre" name="nombre"><br>

<label for="direccion">Direccion</label>
<input id="direccion" name="direccion"><br>

<label for="ciudad">Ciudad</label>
<input id="ciudad" name="ciudad"><br>

</form>


Importantisimo usar tanto el elemento id como el elemento name para los elementos del form. La explicación la podeis encontrar aqui.

El código css para este formulario es algo más complejo, pero no demasiado:


label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}

label {
text-align: right;
width: 75px;
padding-right: 20px;
}

br {
clear: left;
}


En primer lugar, aplicamos un display: block a todos los elementos del formulario (label e input) lo cual nos permite alinear los elementos de una forma más bonita. Luego les aplicamos un tamaño de 150 pixeles (width: 150px que más tarde sobreescribiremos) y un margen inferior de 10pixeles para que quede más bonito y no todo apelotonao. Finalmente, les aplicamos un float: left para alinear estos componentes a la izquierda. Declarando esta ultima propiedad en ambos elementos ignoramos las diferencias entre el modelo que sigue Internet Explorer y otros navegadores. Esto funciona asi, no me pregunteis porqué.

Como colofón, he añadido un clear:left asociado a los elementos <br> para que las etiquetas y los inputs del form no queden todos unos encima de los otros. He elegido el br para meter el clear:left ya que si lo metiese directamente en los label (como deberia ser) en Opera no funcionaria correctamente.

Y esto es todo, formularios sin tablas usando css!

Recopilado de QuirksMode Tableness Forms