540 votos

¿Debo poner etiqueta de entrada dentro de la etiqueta etiqueta?

Me preguntaba si hay una mejor práctica en materia de etiqueta y etiqueta de entrada:

manera 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>
 

485voto

superUntitled Puntos 8085

De w3: La etiqueta en sí puede ser colocado antes de, después de 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 una tabla se utiliza para el diseño, con la etiqueta en una celda y sus asociados campo de formulario en otra celda.

Cualquiera de las dos es válida. Me gusta usar ya sea el primer o el segundo ejemplo, ya que le da más estilo de control.

57voto

Znarkus Puntos 5025

Yo prefiero

 <label>
  Firstname
  <input name="firstname" />
</label>

<label>
  Firstname
  <input name="lastname" />
</label>
 

sobre

 <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 código HTML sea más legible. Y yo realmente creo que mi primer ejemplo es más fácil de peinar con CSS, como CSS funciona muy bien con elementos anidados.

Pero es una cuestión de gustos, supongo.


Si necesita más opciones de estilo, añada una etiqueta span.

 <label>
  <span>Firstname</span>
  <input name="firstname" />
</label>

<label>
  <span>Firstname</span>
  <input name="lastname" />
</label>
 

Código todavía se ve mejor en mi opinión.

37voto

Terry Puntos 742

Si se incluye la etiqueta de entrada en la etiqueta de la etiqueta, no es necesario utilizar el 'de' atributo.

Dicho esto, no me gusta para incluir la etiqueta de entrada en mis etiquetas porque creo que son por separado, que no contengan tales entidades.

15voto

Parrots Puntos 10968

Personalmente me gusta mantener la etiqueta exterior, como en el segundo ejemplo. Es por eso que el atributo FOR está ahí. La razón es que a menudo Voy a aplicar estilos a la etiqueta, como un ancho, para obtener el formulario para que siente bien (abreviada a continuación):

 <style>
label {
  width: 120px;
  margin-right: 10px;
}
</style>

<label for="myinput">My Text</label>
<input type="text" id="myinput" /><br />
<label for="myinput2">My Text2</label>
<input type="text" id="myinput2" />
 

Hace que sea por lo que puede evitar las tablas y todo eso en mis formas.

14voto

user470514 Puntos 91

Ver http://www.w3.org/TR/html401/interact/forms.html#h-17.9 para el W3 recomendaciones.

Dicen que puede ser hecho de cualquier manera. Se describen los dos métodos explícitos (el uso de "por" con el id del elemento) e implícita (incrustar el elemento en la etiqueta):

Explícito:

El atributo for asocia una etiqueta con otro control explícita: el valor del atributo debe ser el mismo que el valor del atributo id del asociado elemento de control.

Implícito:

Para asociar una etiqueta con otro control, implícitamente, el elemento de control debe estar en el contenido de la ETIQUETA de elemento. En este caso, la ETIQUETA puede contener sólo un elemento de control.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X