etiquetas - title html definicion

Uso de la etiqueta HTML ''etiqueta'' con botones de radio

Question

¿Funciona la label etiqueta con los botones de radio? Si es así, cómo lo usas? Tengo un formulario que se muestra así:

First Name: (text field)
Hair Color: (color drop-down)
Description: (text area)
Salutation: (radio buttons for Mr., Mrs., Miss)

Me gustaría usar la label etiqueta para cada etiqueta en la columna de la izquierda para definir su conexión con el control apropiado en la columna de la derecha. Pero si utilizo un botón de opción, la especificación parece indicar que, de repente, la etiqueta de "Saludo" para el control del formulario ya no está en la etiqueta, sino las opciones "Sr., Sra., Etc." ir en la label etiqueta.

Siempre he sido fanático de la accesibilidad y de la web semántica, pero este diseño no tiene sentido para mí. La label etiqueta declara explícitamente las etiquetas. Las option selección de etiqueta de opción. ¿Cómo declaras una label en la etiqueta real para un conjunto de botones de radio?

ACTUALIZAR: Aquí hay un ejemplo con código:

<tr><th><label for"sc">Status:</label></th>
    <td>&#160;</td>
    <td><select name="statusCode" id="sc">
            <option value="ON_TIME">On Time</option>
            <option value="LATE">Late</option>
        </select></td></tr>

Esto funciona genial Pero a diferencia de otros controles de formulario, los botones de opción tienen un campo separado para cada valor:

<tr><th align="right"><label for="???">Activity:</label></th>
    <td>&#160;</td>
    <td align="left"><input type="radio" name="es" value="" id="es0" /> Active &#160;
        <input type="radio" name="es" value="ON_TIME" checked="checked" id="es1" /> Completed on Time &#160;
        <input type="radio" name="es" value="LATE" id="es2" /> Completed Late &#160;
        <input type="radio" name="es" value="CANCELED" id="es3" /> Canceled</td>
</tr>

¿Qué hacer?

Answer 1

¿Funciona la etiqueta de etiqueta con los botones de radio?

Sí

Si es así, cómo lo usas?

Igual que para cualquier otro control de formulario.

O le da un atributo for que coincide con la id del control, o coloca el control dentro del elemento label.

Me gustaría utilizar la etiqueta de etiqueta para cada etiqueta en la columna de la izquierda

Una etiqueta es para un control, no un conjunto de controles.

Si desea subtitular un conjunto de controles, use un <fieldset> con una <legend> (y dé una <label> a cada control en el conjunto).

<fieldset>
  <legend> Salutation </legend>
  <label> <input type="radio" name="salutation" value="Mr."> Mr. </label>
  <label> <input type="radio" name="salutation" value="Mrs."> Mrs. </label>
  <!-- etc -->
</fieldset>

Answer 2

Ah, sí. Así es como funciona.

<label> etiqueta campos individuales , por lo tanto cada <input type="radio"> obtiene su propia <label> .

Para etiquetar un grupo de campos (por ejemplo, varios botones de <fieldset> que comparten el mismo name ), utiliza una etiqueta <fieldset> con un elemento <legend> .

<fieldset>
    <legend>Salutation</legend>

    <label for="salutation_mr">Mr <input id="salutation_mr" name="salutation" type="radio" value="mr"><label>

    <label for="salutation_mrs">Mrs <input id="salutation_mrs" name="salutation" type="radio" value="mrs"><label>

    <label for="salutation_miss">Miss <input id="salutation_miss" name="salutation" type="radio" value="miss"><label>

    <label for="salutation_ms">Ms <input id="salutation_miss" name="salutation" type="radio" value="ms"><label>
</fieldset>

Answer 3

El atributo ''para'' de la etiqueta corresponde a la ID de los botones de radio. Asi que...

<label for="thisRad">Radio Button 1</label>
<input type="radio" id="thisRad" />

Espero eso ayude.

Querrás que el tuyo luzca algo como esto ...

Salutation<br />
<label for="radMr">Mr.</label><input type="radio" id="radMr" />
<label for="radMrs">Mrs.</label><input type="radio" id="radMrs" />
<label for="radMiss">Miss.</label><input type="radio" id="radMiss" />

Answer 4

No puede declarar una etiqueta para un conjunto de botones, sino para cada botón. En este caso, las etiquetas son "Sr.", "Sra." y "Miss", no "Salutation".

ACTUALIZAR
Tal vez deberías usar otra etiqueta para esta "etiqueta" tuya, ya que no es realmente una etiqueta.

<tr>
    <th align="right" scope="row"><span class="label">Activity:</span></th>
    <td>&#160;</td>
    <td align="left"><label><input type="radio" name="es" value="" id="es0" /> Active &#160;</label>
    [... and so on]
</tr>

Answer 5

Para responder a su pregunta: no, no puede conectar Salutation a uno de los botones de opción. No tendría sentido que si hace clic en Salutation, se seleccione una de las opciones. En cambio, puede darle a Mr, Mrs y Miss sus propias etiquetas, de modo que si alguien hace clic en una de esas palabras, se seleccionará el botón de opción correspondiente.

<input id="salutation_mr" type="radio" value="mr" name="salutation">
<label for="salutation_mr">Mr.</label>
<input id="salutation_mrs" type="radio" value="mrs" name="salutation">
<label for="salutation_mrs">Mrs.</label>
<input id="salutation_miss" type="radio" value="miss" name="salutation">
<label for="salutation_miss">Miss</label>

Creo que todavía puedes incluir Salutation dentro de un elemento <label> , simplemente no puedes usar el atributo for . Me corrigen, vea los comentarios a continuación. Aunque técnicamente es posible, no es para lo que se diseñó <label> .

Answer 6

Puede usar aria-role="radiogroup" para asociar los controles sin usar un <fieldset> . Esta es una de las técnicas sugeridas por WCAG 2.0 .

<div role="radiogroup" aria-labelledby="profession_label" aria-describedby="profession_help">
  <p id="profession_label">What is your profession?</p>
  <p id="profession_help">If dual-classed, selected your highest leveled class</p>
  <label><input name="profession" type="radio" value="fighter"> Fighter</label>
  <label><input name="profession" type="radio" value="mage"> Mage</label>
  <label><input name="profession" type="radio" value="cleric"> Cleric</label>
  <label><input name="profession" type="radio" value="theif"> Thief</label>
</div>

Sin embargo, noté que al usar esta técnica la herramienta WebAim Wave para dar una advertencia sobre un <fieldset> , entonces no estoy seguro de cómo es la compatibilidad de AT para esto.

Answer 7

mis 2 centavos para el tema, o más bien un nodo lateral (no usa una asociación implícita para poder ubicarlo en cualquier lugar, pero vinculando) : la agrupación se realiza mediante el atributo de name y se vincula mediante el atributo id :

<ol>
    <li>
        <input type="radio" name="faqList" id="faqListItem1" checked />
        <div>
            <label for="faqListItem1">i 1</label>
        </div>
    </li>
    <li>
        <input type="radio" name="faqList" id="faqListItem2" />
        <div>
            <label for="faqListItem2">i 2</label>
        </div>
    </li>
    <li>
        <input type="radio" name="faqList" id="faqListItem3" />
        <div>
            <label for="faqListItem3">i 3</label>
        </div>
    </li>
</ol>