Usando "label for" en los botones de radio

136

Cuando se usa el parámetro "etiqueta para" en los botones de opción, 508 *, ¿es correcto lo siguiente?

 <label for="button one"><input type="radio" name="group1" id="r1" value="1" /> button one</label>

o es esto?

 <input type="radio" name="group1" id="r1" value="1" /><label for="button one"> button one</label>

La razón por la que pregunto es que en el segundo ejemplo, "etiqueta" solo abarca el texto y no el botón de opción real.

* La Sección 508 de la Ley de Rehabilitación de 1973 requiere que las agencias federales brinden acceso a software y sitios web a personas con discapacidades.

— niico
fuente

Respuestas:

216

Casi lo tienes. Debería ser esto:

<input type="radio" name="group1" id="r1" value="1" />
<label for="r1"> button one</label>

Expandir fragmento

El valor en fordebe ser la identificación del elemento que está etiquetando.

— Marc W
fuente

Tu respuesta es, por supuesto, cierta, pero Martha tiene la respuesta correcta. Ambos ejemplos de Martha son HTML5 perfectamente válidos. Y, por ejemplo, si desea que todo esté en un marco, es más fácil diseñar el segundo usando CSS. Si desea que las etiquetas estén en otro lugar, primero. Pero ambos están bien. ¡Atentamente!

— Jacek Kowalewski

Hmm .. ¿Cómo haces que una etiqueta cambie entre dos botones de radio? No puede tener dos ID idénticos ...: /

— Nils Sens

@NilsSens Cada par de radio y etiqueta debe tener identificaciones únicas, nunca deben compartir identificaciones

— Daniel Waters

@NilsSens ¿Alternar entre 2 botones de opción y solo tienen 1 etiqueta? Eso suena como un caso claro para usar una casilla de verificación en su lugar: D

— T_D

Ah, no, lo que quise decir era una súper etiqueta que alterna los botones de radio. Me gusta: Categoría de frutas favoritas y cuando haces clic en esa, cambias entre idk "banana" y "strawberry" Porque, ¿por qué aplicar el UX de movimiento del mouse cuando solo puedes alternar las opciones? Hoy, usaría JS para codificarlo a mano, pero sería interesante saber si hay una única forma de CSS :)

— Nils Sens

Cualquiera de las estructuras es válida y accesible, pero el foratributo debe ser igual al del idelemento de entrada:

<input type="radio" ... id="r1" /><label for="r1">button text</label>

<label for="r1"><input type="radio" ... id="r1" />button text</label>

El foratributo es opcional en la segunda versión (etiqueta que contiene entrada), pero IIRC había algunos navegadores más antiguos que no hacían clic en el texto de la etiqueta a menos que lo incluyera. La primera versión (etiqueta después de la entrada) es más fácil de diseñar con CSS usando el selector de hermanos adyacente +:

input[type="radio"]:checked+label {font-weight:bold;}

— Marta
fuente

Es cierto, aunque en el segundo ejemplo, el atributo "for" no es obligatorio.

— Ismael, el

Creo que hubo algunas versiones de navegador que solo hicieron que el texto del botón fuera "cliqueable" si usabas el atributo 'for', es decir, no era suficiente envolver la entrada dentro de la etiqueta.

— Martha el

@ Martha - ¿Sabes qué navegadores?

— Kirkland

@ Kirkland - w3.org/TR/html401/interact/forms.html#h-17.9 parece indicar que el segundo formulario es válido, pero varias fuentes indican que el soporte puede no ser universal. Probablemente sea mejor proporcionar el foratributo en cualquier caso.

— Ismael

@RalphDavidAbernathy Sí, se aplican las mismas reglas para las casillas de verificación.

— Ismael

(En primer lugar, lea las otras respuestas que explican foren las <label></label>etiquetas. Bueno, ambas respuestas superiores son correctas, pero para mi desafío, fue cuando tiene varias cajas de radio, debe seleccionar un nombre común como name="r1" pero con diferentes identificadores id="r1_1" ... id="r1_2"

De esta manera, la respuesta es más clara y elimina los conflictos entre el nombre y los identificadores también.

Necesita diferentes identificadores para diferentes opciones de la caja de radio.

<input type="radio" name="r1" id="r1_1" />

       <label for="r1_1">button text one</label>
       <br/>
       <input type="radio" name="r1" id="r1_2" />

       <label for="r1_2">button text two</label>
       <br/>
       <input type="radio" name="r1" id="r1_3" />

       <label for="r1_3">button text three</label>

Expandir fragmento

— Ebrahim
fuente