Foros del Web » Creando para Internet » CSS »

Posicionar campos de un formualrio con tablas o con CSS

Estas en el tema de Posicionar campos de un formualrio con tablas o con CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/03/2007, 12:24
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 11 años, 4 meses
Puntos: 70
Pregunta Posicionar campos de un formualrio con tablas o con CSS

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
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #2 (permalink)  
Antiguo 20/03/2007, 13:05
Avatar de demiurgo_daemon  
Fecha de Ingreso: diciembre-2006
Ubicación: Querétaro
Mensajes: 184
Antigüedad: 11 años
Puntos: 2
Re: Posicionar campos de un formualrio con tablas o con CSS

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
  #3 (permalink)  
Antiguo 20/03/2007, 13:12
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 11 años, 4 meses
Puntos: 70
Exclamación Re: Posicionar campos de un formualrio con tablas o con CSS

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

Gracias y saludos!!!
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:21.