¿Debo poner elementos de entrada dentro de un elemento de etiqueta?
¿ Existe alguna práctica recomendada con respecto al anidamiento de labelelementos inputHTML?
forma clásica:
<label for="myinput">My Text</label>
<input type="text" id="myinput" />
o
<label for="myinput">My Text
<input type="text" id="myinput" />
</label>
De la especificación HTML4 de W3 :
La propia etiqueta puede estar situada antes, después o alrededor del control asociado.
<label for="lastname">Last Name</label>
<input type="text" id="lastname" />o
<input type="text" id="lastname" />
<label for="lastname">Last Name</label>o
<label>
<input type="text" name="lastname" />
Last Name
</label>Tenga en cuenta que la tercera técnica no se puede utilizar cuando se utiliza una tabla para el diseño, con la etiqueta en una celda y su campo de formulario asociado en otra celda.
Cualquiera de los dos es válido. Me gusta usar el primer o el segundo ejemplo, ya que te brinda más control de estilo.
yo prefiero
<label>
Firstname
<input name="firstname" />
</label>
<label>
Lastname
<input name="lastname" />
</label>
encima
<label for="firstname">Firstname</label>
<input name="firstname" id="firstname" />
<label for="lastname">Lastname</label>
<input name="lastname" id="lastname" />
Principalmente porque hace que el HTML sea más legible. Y de hecho creo que mi primer ejemplo es más fácil de diseñar con CSS, ya que CSS funciona muy bien con elementos anidados.
Pero es cuestión de gustos, supongo.
Si necesita más opciones de estilo, agregue una etiqueta de extensión.
<label>
<span>Firstname</span>
<input name="firstname" />
</label>
<label>
<span>Lastname</span>
<input name="lastname" />
</label>
En mi opinión, el código todavía se ve mejor.
