Tanto en HTML 4.01 como para XHTML, el elemento <label> está pensado
para ser un elemento per-se, y es el atributo "id" el que lo asocia con
el control a que hace referencia. Puede anidarse el <input>, pero no es
lo recomendable. Podéis verlo en las especificaciones del W3C [1]
Si bien es cierto que el elemento _admite_ tener un <input> anidado, no
es el uso preferido y sólo se utiliza por comodidad en casos en que
realmente no sea necesario asociar el <label> con el <input> mediante
ese atributo, pero eso puede no tener implementaciones iguales en todos
los dispositivos (el uso de id, por ejemplo, hace que incluso en
lectores de pantalla se asocie el <label> con el <input>
correspondiente). Si además eso nos hace introducir un elemento <br />
para separar las líneas estamos cometiendo un error de mezcla de
contenido y presentación.
W3C ejemplifica el uso de <label> del siguiente modo:
<form action="http://somesite.com/prog/adduser"; method="post">
<label for="firstname">First name: </label>
<input type="text" id="firstname" />
<label for="lastname">Last name: </label>
<input type="text" id="lastname" />
<label for="email">email: </label>
<input type="text" id="email" />
<input type="submit" value="Send" />
<input type="reset" />
</form>
Si utilizamos de ese modo los elementos se puede seguir presentado de
varios modos la información al usuario:
1. Cuando queramos que estén en líneas distintas (uno sobre otro)
.label, .input {
display: block;
}
2. Cuando queramos que estén en la misma línea (uno al lado del otro)
no hace falta poner ninguna característica especial en el CSS
puesto que es el comportamiento por defecto. No obstante, en este
caso el uso de listas para contener los elementos <label> e
<input> nos garantiza que incluso en ausencia de CSS el usuario
verá el formulario como una ristra vertical de controles con la
etiqueta a su izquierda (de no ser así la ristra no se rompe en
cada nuevo control o etiqueta).
Si volvemos al ejemplo del W3C, utilizando listas tendríamos:
<form action="http://somesite.com/prog/adduser"; method="post">
<ul>
<li><label for="firstname">First name: </label>
<input type="text" id="firstname" /></li>
<li><label for="lastname">Last name: </label>
<input type="text" id="lastname" /></li>
<li><label for="email">email: </label>
<input type="text" id="email" /></li>
</ul>
<input type="submit" value="Send" />
<input type="reset" />
</form>
que nos da el control de mostrar al usuario el formulario de una forma
bastante ordenada aún en ausencia de CSS.
El uso de <br /> en este caso no está justificado, a menos que realmente
queramos pensar en alguien que extrañamente no dispone de otro medio de
navegar por internet que un navegador gráfico que no disponga de soporte
suficiente para siquiera entender el uso de listas (realmente mostrar
las etiquetas sobre el control siempre tiene sus desventajas de
legibilidad según sea el formulario).
Un saludo,
Victoria
[1] Especificación de HTML 4.01:
http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1
Ramón Corominas escribió:
> 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;
>> }
>>
>>
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
