Posicionar campos de un formualrio con tablas o con CSS

[Carxl]

Hola a todos.

Pues es una duda que me tiene pensando , no sè còmo serìa la mejor forma de alinear los campos de un fomulario. Lo quiero hacer en estilos pero no sè como , pero no lo quiero hacer con tablas...

El posicionamiento de los input y de los objetos de dicho form, se hacen con CSS?? o con tablas?. Me parece que al hacerlo con Css, habrìan muchos div's no??

Agradezco que me saquen de esta duda.

Gracias de antemano

[demiurgo_daemon]

hola,

hay muchas opciones, y varias tienen sus recovecos con explorer 6 e inferior (realmente a mí no me interesa, pero hay a quien sí)

para mostrarte los ejemplos, vamos a asumir una forma sencilla:

Código:

<form method='post' action='this.php'>
<fieldset>
<legend>prueba</legend>
<label for='nombre'>nombre</label>
<input type='text' name='nombre' id='nombre' />
<button type='submit' value='Enviar'>Enviar</button>
</fieldset>
</form>

1. puedes hacer que las etiquetas y botones estén en un renglón aparte:

Código:

label, button{
display: block;
}

éste es mi favorito porque es el más sencillo

2. puedes hacer que las etiquetas tengan un ancho definido (esto haría necesario poner un <br /> después de cada input:

Código:

label{
width: 20em;
}

3. ambas opciones anteriores, puedes aplicarlas con selectores de tipo. ejemplo: si quieres que los label que están junto a una caja de texto sean bloques, pero si están junto a un checkbox o un radio no, puedes hacer algo así:

Código:

<!-- html -->
<form method='post' action='this.php'>
<fieldset>
<legend>prueba</legend>
<label for='nombre'>nombre</label>
<input type='text' name='nombre' id='nombre' />

<p>Recordar mi nombre</p>
<input type='radio' name='rad' id='rad2' value='si' />
<label for='rad1'>si</label>
<input type='radio' name='rad' id='rad2' value='no' />
<label for='rad2'>no</label>

<button type='submit' value='Enviar'>Enviar</button>
</fieldset>
</form>

/* css */
label + input[type=text], button{
display: block;
}

aquí es cuando se vuelve truculento con ie6. resulta que a micro$#*t no le gusta seguir los estándares, y aunque el ie7 corrige muchos de estos problemas, sigue sin ser un navegador de verdad. son efectos maravillosos que no requieren de procesamiento especial (léase javascript) o destruir la validez de un documento. te invito a que los pruebes.

saludos

[Carxl]

Ok demiurgo_daemon!. Probaré tus opciones y luego t comento

Gracias y saludos!!!