[Ovillo] Correcta maquetacion de formulario

Ramón Corominas listas en ramoncorominas.com
Mie Sep 10 22:46:40 UTC 2008


A ver...

<label>Nombre:
<input type="text" />
</label>

Si quieres que aparezcan en dos líneas:

label, input {
  display: block;
}

Y si quieres que aparezcan en la misma línea, añades (por ejemplo):

label input {
  margin-top: -1.0em;
  margin-left: 10em;
}

Así te ahorras listas y <br />, y sigues manteniendo la asociación 
implícita <guiño>

Nota: esto afectaría a todos los <input> independientemente de que 
fueran tipo texto, password o submits, así que si quieres puedes asignar 
diferencias:

input[type="text"], input[type="password"] {
  margin-top: -1.0em;
  margin-left: 10em;
}

Eso sí, sólo funcionará con CSS 2, así que a lo mejor en la práctica 
tendrás que usar clases distintas.

Saludos,
Ramón.

> Glupppsss, segunda sugerencia, escribe el label como elemento 
> independiente y el input también:
>
>     <label for="nombre">Texto:</label>
>     <input name="nombre" id="nombre" size="15" maxlength="32" 
> type="password">
>
> Mediante el CSS puedes darle esa alineación sin ninguna necesidad de 
> introducir <br /> o listas:
>
>     .label {
>         display: block;
>     }
>   


Más información sobre la lista de distribución Ovillo