Formulario sin tablas (actualizado)
Usaremos un HTML lo más simple posible, para sí no tener conflictos de browsers (es bueno evitarlo desde el principio).
Nótese que usé
en vez de
. Para browsers modernos esto es innecesario, pero se incluye precisamente para compatibilidad con browsers antiguos (nuevamente, para evitar conflictos). Además, se verá de todas formas en todos los browsers y no incomodará el CSS.
<form><br /><br />
<label for="nombre">Nombre</label><br /><br />
<input id="nombre" name="nombre"/><br /><br /><br />
<label for="direccion">Dirección</label><br /><br />
<input id="direccion" name="direccion"/><br /><br /><br />
<label for="comuna">Comuna</label><br /><br />
<input id="comuna" name="comuna"/><br /><br /><br />
</form>Nótese que fueron utilizados ambos «ID» y «NAME» en los input. Esto se hizo porque los formularios que sólo tienen «ID» no envían su contenido al servidor, y los que tienen sólo NAME no linkean bien sus etiquetas. Así que para evitar más problemas se usaron ambos.
A continuación, sigue el CSS:
label, input {<br />
display: block;<br />
width: 150px;<br />
float: left;<br />
margin-bottom: 10px;<br />
}label {<br />
text-align: right;<br />
width: 75px;<br />
padding-right: 20px;<br />
}br {<br />
clear: left;<br />
}Primero se les agregó a las etiquetas (label) e inputs el display: block permitiendo que se alineen. Lo demás es para mejorar la estética del layout, depende de cada diseñador. Finalmente, ambos tags reciben un float: left. Al declarar esto en ambos elementos, permite ignorar las diferencias en float entre Explorer y otros browser. Ni idea porqué funciona, pero funciona.
label,input {<br />
display: block;<br />
width: 150px; <br />
float: left;<br />
margin-bottom: 10px;<br />
} Algunas cosas más para que se vea mejor:
label {<br />
text-align: right;<br />
width: 75px;<br />
padding-right: 20px;<br />
}Finalmente como última cosa, se le da al tag br un clear:left, donde cualquier float definido anteriormente es cancelado. Debemos insertar un clear en algún lugar, o todas las etiquetas e inputs se alinearian uno al lado del otro, lo que no queremos (en este caso). Entonces se le inserta el clear en el br porque así Opera lo lee bien. Detalles de cada browser.
br {<br />
clear: left;<br />
}