SylarPoOoX

Cuando hacemos un formulario lo ideal es que el resultado final siempre sea un formulario estructurado, una columna para las etiquetas, otra columna para las cajas de texto, para que así un nombre largo no te deje un formulario con cajas escalonadas y quede mas bonito.

El problema es que usamos tablas para crear dicha estructura, y a veces trabajar con tablas siginfica perder el control sobre los elementos, trabajar con una estructura fija siempre es engorroso y a veces queremos deslimitar ese obstaculo.

Por lo tanto, hoy me puesto a trabajar en un sistema para poder crear un formulario sin la necesidad de tabla, y que quede igual de estructurado. Y aquí os lo dejo para que podais probarlo si os convence el resultado.

HTML

<form name=”login” method=”post” action=”./Sesion/login.php” id=”formulario”>

<p>

<label for=”usuario”>Usuario</label>
<input type=”text” name=”usuario” id=”usuario” value=”" />

</p>
<p>

<label for=”contrasena”>Contraseña</label>
<input type=”password” name=”contrasena” id=”contrasena” value=”" />

</p>
<p>

<input type=”submit” id=”boton” value=”" />

</p>

</form>

CSS

/************************************
* Estilos formulario
************************************/
.formulario{

font-size:.8em;

}

.formulario p label.etiqueta{

width:100px;
font-weight:bold;
float:left;
border:0px;

}

.formulario p input.caja{

width:140px;
font-size:.9em;
border:1px solid;
padding:1px 5px;

}

.formulario p input.boton{

margin-left:208px;
border:0px;

}

Apuntes

Con esto ya tienes tu formulario sin tabla, todo con estilos css y una estructura xHtml y css perfectamente válida de cara a los estandares del web y funcionando en todos los navegadores.

El codigo que he pegado aquí te situa las etiquetas una debajo de otra empezando en el mismo left, te situa las cajas de texto una debajo de otra, al lado de las etiquetas, pero alineadas entre ellas. El equivalente a una tabla con 2 filas (tr) con 2 columnas (td) cada una, y una fila con colspan a 2.

Ahora imaginad que pensais que este formulario no lo quereis en vertical sino en horizontal. El equivalente a crear una tabla con 1 fila y 5 columnas, con el código traspasado a Css como os he mostrado yo, es tan fácil como colocar un ‘float:left;’ a la clase de las cajas.

El único inconveniente que tiene este sistema es que tienes que poner la medida del label de la etiqueta mas larga, es decir, si tienes una etiqueta que sobresale por encima de las otras, el escalado de las cajas no es automatico, sino que tendrias que especificar el width de los labels para adecuarlos a la nueva situación.

De todos modos te ahorras la tabla, te ahorras mucho tiempo en modificaciones de estilo y centralizas los estilos de labels, botones, formulario y cajas.