html - name - meta tags generator

¿Debo poner elementos de entrada dentro de un elemento de etiqueta?

Question

¿Existe alguna práctica recomendada relacionada con el anidamiento de elementos HTML de input y etiqueta?

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>

Answer 1

Ambos son correctos, pero colocar la entrada dentro de la etiqueta hace que sea mucho menos flexible cuando se estiliza con CSS.

Primero, una <label> está restringida en los elementos que puede contener . Por ejemplo, solo puede poner un <div> entre <input> y el texto de la etiqueta, si <input> no está dentro de <label> .

En segundo lugar, si bien existen soluciones alternativas para facilitar el estilo, como envolver el texto de la etiqueta interna con un espacio, algunos estilos se heredarán de los elementos principales, lo que puede complicar aún más el estilo.

Answer 2

Como ha dicho la mayoría de las personas, ambas formas funcionan de hecho, pero creo que solo la primera debería. Siendo semánticamente estricto, la etiqueta no "contiene" la entrada. En mi opinión, la relación de contención (padre / hijo) en la estructura de marcado debe reflejar la contención en la salida visual . es decir, un elemento que rodea a otro en el marcado debe dibujarse alrededor de ese en el navegador . De acuerdo con esto, la etiqueta debe ser el hermano de la entrada, no su padre. Así que la opción número dos es arbitraria y confusa. Todos los que hayan leído el Zen de Python probablemente estarán de acuerdo (Flat es mejor que anidado, Sparse es mejor que denso, Debería haber una, y preferiblemente solo una forma obvia de hacerlo ...).

Debido a decisiones como la del W3C y los principales proveedores de navegadores (que permiten "la forma en que prefieras hacerlo", en lugar de "hacerlo de la manera correcta") es que la web está tan desordenada hoy en día y los desarrolladores tenemos que lidiar con los enredos Y tan diverso código legado.

Answer 3

Consulte http://www.w3.org/TR/html401/interact/forms.html#h-17.9 para ver las recomendaciones de W3.

Dicen que se puede hacer de cualquier manera. Describen los dos métodos como explícitos (usando "for" con el id del elemento) e implícitos (incrustando el elemento en la etiqueta):

Explícito:

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

Implícito:

Para asociar implícitamente una etiqueta con otro control, el elemento de control debe estar dentro del contenido del elemento LABEL. En este caso, la ETIQUETA solo puede contener un elemento de control.

Answer 4

Normalmente voy con las dos primeras opciones. He visto un escenario cuando se usó la tercera opción, cuando las opciones de radio estaban incrustadas en etiquetas y el css contenía algo como

label input {
    vertical-align: bottom;
}

Con el fin de garantizar la correcta alineación vertical de las radios.

Answer 5

Personalmente, me gusta mantener la etiqueta en el exterior, como en el segundo ejemplo. Es por eso que el atributo FOR está ahí. La razón es que a menudo aplico estilos a la etiqueta, como un ancho, para que la forma se vea bien (abrevie abajo):

<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" />

Lo hace para que pueda evitar las tablas y toda esa basura en mis formularios.

Answer 6

Prefiero en gran medida envolver elementos dentro de mi <label> porque no tengo que generar los ID.

Soy un desarrollador de Javascript, y React o Angular se utilizan para generar componentes que pueden ser reutilizados por mí o por otros. Entonces sería fácil duplicar un ID en la página, lo que lleva a comportamientos extraños.

Answer 7

Refiriéndose a WHATWG ( Escribiendo la interfaz de usuario de un formulario ) no es incorrecto poner el campo de entrada dentro de la etiqueta. Esto guarda su código porque el atributo for de la label ya no es necesario.

Answer 8

Si incluye la etiqueta de entrada en la etiqueta de etiqueta, no necesita usar el atributo ''for''.

Dicho esto, no me gusta incluir la etiqueta de entrada en mis etiquetas porque creo que son entidades separadas, que no contienen,

Answer 9

Un ''gotcha'' notable dicta que nunca debe incluir más de un elemento de entrada dentro de un elemento <label> con un atributo "for" explícito, por ejemplo:

<label for="child-input-1">
  <input type="radio" id="child-input-1"/>
  <span> Associate the following text with the selected radio button: </span>
  <input type="text" id="child-input-2"/>
</label>

Si bien esto puede ser tentador para las características de formulario en las que un valor de texto personalizado es secundario a un botón de radio o una casilla de verificación, la funcionalidad de enfoque de clic del elemento de la etiqueta inmediatamente enfocará el elemento cuya ID se define explícitamente en su atributo ''para'' , lo que hace casi imposible que el usuario haga clic en el campo de texto contenido para ingresar un valor.

Personalmente, trato de evitar elementos de etiqueta con entrada de niños. Parece semánticamente impropio que un elemento de etiqueta abarque más que la etiqueta en sí. Si está anidando entradas en etiquetas para lograr una cierta estética, debería usar CSS en su lugar.

Answer 10

yo prefiero

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

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

terminado

<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 realmente creo que mi primer ejemplo es más fácil de estilizar con CSS, ya que CSS funciona muy bien con elementos anidados.

Pero supongo que es cuestión de gustos.

Si necesita más opciones de estilo, agregue una etiqueta span.

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

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

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

Answer 11

Desde w3: la etiqueta en sí puede colocarse 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 da más control de estilo.

Answer 12

Diferencia de comportamiento: haciendo clic en el espacio entre la etiqueta y la entrada

Si hace clic en el espacio entre la etiqueta y la entrada, activa la entrada solo si la etiqueta contiene la entrada.

Esto tiene sentido ya que en este caso el espacio es solo otro de los caracteres de la etiqueta.

<p>Inside:</p>

<label>
  <input type="checkbox" />
  |&lt;----- Label. Click between me and the checkbox.
</label>

<p>Outside:</p>

<input type="checkbox" id="check" />
<label for="check">|&lt;----- Label. Click between me and the checkbox.</label>

El poder hacer clic entre la etiqueta y el cuadro significa que es:

• más fácil de hacer clic
• menos claro donde empiezan y terminan las cosas

Los ejemplos de la casilla de verificación de Bootstrap v3.3 usan la entrada que se encuentra en: http://getbootstrap.com/css/#forms Puede ser conveniente seguirlos. Pero cambiaron de opinión en https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios así que ya no sé lo que es sabio:

Las casillas de verificación y el uso de radios están diseñados para admitir la validación de formularios basada en HTML y proporcionar etiquetas concisas y accesibles. Como tal, nuestros <input> s y <label> s son elementos hermanos en lugar de un <input> dentro de un <label> . Esto es un poco más detallado ya que debe especificar id y para que los atributos se relacionen con <input> y <label> .

Pregunta de UX que trata este punto en detalle: https://ux.stackexchange.com/questions/23552/should-the-space-between-the-checkbox-and-label-be-clickable