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