dos campos de entrada dentro de una etiqueta

considerar lo siguiente:dos campos de entrada dentro de una etiqueta

<label>Range from 
    <input name='min_value'/> to 
    <input name='max_value' /> 
</label>

¿Es esta semánticamente correcta, ya que las recomendaciones del W3C afirman que una etiqueta se asocia con exactamente una forma de control?

Al hacer clic en la segunda entrada ¿cambia el foco inmediatamente a la primera entrada? ¿Se puede prevenir esto?

¿Cómo marcaría una combinación de entrada mínima/máxima para mostrar que dos entradas pertenecen juntas?

Fuente

2012-01-25 sqwk

¿Por qué necesita poner entrada dentro de la etiqueta? ¿Por qué no Rango de a –

Semánticamente, necesita un atributo for para su etiqueta que enlaza con el ID de una entrada (que debe ser único en el alcance de la página). – MetalFrog

@MetalFrog: Anidar el control en la etiqueta proporcionará la semántica necesaria; agregar un atributo for a la etiqueta en esa situación es redundante. El atributo for solo es necesario cuando el control aparece en otro lugar. Dicho esto, * puede * ser útil para especificar un atributo for de todos modos para asegurarse de que está asociando la etiqueta con el control correcto, ya que se generará un error de validación cuando se encuentre un conflicto: "Cualquier descendiente de entrada de un elemento de etiqueta con un atributo for debe tener un valor de ID que coincida con el del atributo ". – BoltClock

No, no es correcto (ya que, como nota, un label se asocia con exactamente uno entrada de formulario).

Para etiquetar un grupo de entradas que pertenecen juntos, utilizar un <fieldset> y una <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:

<input />^{HTML 5 spec, WHATWG definition}.
<fieldset>^{HTML 5 spec, WHATWG definition}.
<label>^{HTML 5 spec, WHATWG definition}.
<legend>^{HTML 5 spec, WHATWG definition}.

Fuente

2012-01-25 14:31:31

Parece que también puede usar [etiquetado por] (https://www.w3.org/TR/WCAG20-TECHS/ARIA9.html#ARIA9-ex2) (aunque aún así optaría por su solución). –

-3

no creo que deba colocar 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.

Fuente

2012-01-25 14:32:02 kolin

No, está perfectamente bien poner una entrada dentro de una etiqueta. En un mundo perfecto, la asociación for/id no debería ser necesaria con las denominadas etiquetas implícitamente asociadas porque sería tan obvio que la etiqueta correspondiente es la principal de esta entrada. En el mundo real, los lectores de pantalla no lograron obtener eso durante tanto tiempo que es obligatorio usar los atributos matching/id. – FelipeAls

' Su edad (1, 2 o 3 dígitos)' es un ejemplo del uso del elemento label para el texto de ayuda mostrado en el derecho de la entrada pero leído por lectores de pantalla en el momento correcto: antes de que el usuario ((parcialmente) ciego) tenga la posibilidad de escribir algo en la entrada. No es tan útil ayudarlo después de que tipeó algo en la entrada;) – FelipeAls

IRL, una etiqueta no contiene para qué sirve. Un frasco de pepinillos no está contenido dentro de la etiqueta, lo que indica que es un frasco de pepinillos.La etiqueta simplemente indica que es para ese frasco de pepinillos. Puedo mover esa etiqueta a cualquier parte, pero todavía es para ese frasco de pepinillos. Lo mismo ocurre con los formularios HTML. IMO, una etiqueta no debe contener el control que son etiquetas. Simplemente debería apuntar a ese control particular. ¿Qué sucede si quiero eliminar la etiqueta (por alguna razón que todavía no puedo pensar) a través de JavaScript? ¡También eliminaría el control! Puedo tirar esa etiqueta y el frasco de pepinillos todavía está allí. –

Cómo sobre esto:

<label> Range from <input name='min_value'> </label> 
<label> to <input name='max_value'> </label>

Fuente

2012-01-25 14:35:31

Según this - etiqueta puede contener sólo una entrada, ya que debe estar asociado con sólo una control. Poner entrada dentro de la etiqueta significa la eliminación del atributo for (enlace automático).

Por lo que debe o bien poner sola de entrada en la etiqueta o especificar for atributo que apunta a la entrada id y No entrada de puesta en etiqueta.

Fuente

2012-01-25 14:37:05 zysoft

Como dice la respuesta aceptada, eso no es correcto, sin embargo, creo que hay mejores formas 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 (utilizando ocultos label etiquetas):

<label for='start'>Range start</label> 
<input type='text' id='start' /> 

<label for='end' class='hidden'>Range end</label> 
<input type='text' id='end' />

Cuando el .hidden la clase es only readable by screen readers.

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 (por ejemplo la adición de una "a" etiqueta) no. Las opciones n. ° 2 y n. ° 3 podrían no ser las mejores para este caso específico, pero vale la pena mencionarlas para casos similares.

Fuente: http://webaim.org/techniques/forms/advanced

Fuente

2015-07-07 16:44:45

1 LABEL = 1 ENTRADA !!!

Si coloca 2 ENTRADAS dentro de una ETIQUETA, NO funcionará en Safari (y iPad y iPhone) ... porque cuando hace clic dentro de LABEL enfoca automáticamente la primera ENTRADA ... por lo que la segunda entrada es imposible escribir a.

Fuente

2016-11-21 15:51:06 mzvarik

dos campos de entrada dentro de una etiqueta

Respuesta

Cuestiones relacionadas