html - teclado - Dos campos de entrada dentro de una etiqueta
input html ejemplos (7)
1 ETIQUETA = 1 ENTRADA !!!
Si coloca 2 ENTRADAS dentro de una ETIQUETA, NO funcionará en Safari (y iPad y iPhone) ... porque al hacer clic en ETIQUETA enfoca automáticamente la primera ENTRADA ... por lo que es imposible escribir la segunda entrada.
Considera lo siguiente:
<label>Range from
<input name=''min_value''/> to
<input name=''max_value'' />
</label>
¿Es esto correcto semánticamente ya que las recomendaciones del W3C establecen que una etiqueta está asociada exactamente con un control de formulario?
Al hacer clic en la segunda entrada, ¿se cambia de enfoque inmediatamente a la primera entrada? ¿Se puede prevenir esto?
¿Cómo se marcaría una combinación de entrada mín / máx para mostrar que dos entradas van juntas?
Como dice la respuesta aceptada, eso no es correcto, sin embargo, creo que hay mejores maneras de hacerlo.
Alternativas accesibles:
Opción 1 (usando el atributo aria-label ):
Range:
<input ... aria-label=''Range start'' />
<input ... aria-label=''Range end'' />
Opción 2 (usando label ocultas):
<label for=''start''>Range start</label>
<input type=''text'' id=''start'' />
<label for=''end'' class=''hidden''>Range end</label>
<input type=''text'' id=''end'' />
Donde la clase .hidden solo es legible por lectores de pantalla .
Opción 3 (usando aria-labelledby atributos):
<label id=''lblRange''>Range</label>
<input type=''text'' id=''start'' aria-labelledby=''lblRange'' />
<input type=''text'' id=''end'' aria-labelledby=''lblRange'' />
Ventajas de la opción # 1: Cada input tiene una buena descripción que otras sugerencias (como agregar una etiqueta "a") no. Las opciones # 2 y # 3 podrían no ser las mejores para este caso específico, pero vale la pena mencionarlas para casos similares.
De acuerdo con this , la etiqueta puede contener solo una entrada, ya que debe estar asociada con un solo control. Poner información dentro de la etiqueta significa eliminar el atributo for (vinculación automática).
Por lo tanto, debe poner una entrada única en la etiqueta o especificar for atributo que apunta al id entrada y no poner la entrada en la etiqueta.
No creo que debas poner el campo de entrada dentro del control de etiqueta.
<label for="myfield">test</label><input type="text" id="myfield" name="myfield />
La etiqueta es solo eso, una etiqueta para algo.
No, no es correcto (ya que, como se observa, una label está asociada exactamente con una entrada de formulario).
Para etiquetar un grupo de entradas que pertenecen juntas, use un <fieldset> y un <legend> :
<fieldset>
<legend>Range</legend>
<label for="min">Min</label>
<input id="min" name="min" />
<label for="max">Max</label>
<input id="max" name="max" />
</fieldset>
Referencias:
Qué tal esto:
<label> Range from <input name=''min_value''> </label>
<label> to <input name=''max_value''> </label>
Veo muchas respuestas que dicen que es incorrecto poner 2 entradas dentro de una etiqueta. Esto es realmente una declaración incorrecta en html5. El estándar lo permite explícitamente: http://www.w3.org/TR/html5/forms.html#the-label-element
Si no se especifica el atributo for, pero el elemento de etiqueta tiene un descendiente del elemento etiquetable, entonces el primer descendiente en orden de árbol es el control etiquetado del elemento de etiqueta.
Si un elemento de etiqueta tiene contenido interactivo distinto de su control etiquetado, el comportamiento de activación del elemento de etiqueta para eventos dirigidos a esos descendientes de contenido interactivo y cualquier descendiente de esos debe ser para no hacer nada.
Sin embargo, Safari no respeta el estándar html5 aquí (probado en iOS 11.3). Por lo tanto, alguien que quiera ser compatible con Safari debe usar soluciones alternativas aquí o esperar hasta que Apple corrija su navegador.