Verwendung des HTML-Tags „label“ mit Optionsfeldern

Tut das label Tag-Arbeit mit Radiobuttons? Wenn ja, wie verwenden Sie es? Ich habe ein Formular, das so angezeigt wird:

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

Ich möchte die verwenden label -Tag für jedes Etikett in der linken Spalte, um seine Verbindung zum entsprechenden Steuerelement in der rechten Spalte zu definieren. Aber wenn ich ein Optionsfeld verwende, scheint die Spezifikation darauf hinzudeuten, dass plötzlich die eigentliche “Anrede”-Beschriftung für das Formularsteuerelement nicht mehr in die gehört label Tag, sondern die Optionen “Herr, Frau, etc.” gehe in die label Schild.

Ich war schon immer ein Fan von Zugänglichkeit und dem semantischen Web, aber dieses Design ergibt für mich keinen Sinn. Das label tag deklariert Labels explizit. Das option Tag-Auswahloptionen. Wie erklärt man a label auf dem eigentlichen Etikett für eine Reihe von Optionsfeldern?

AKTUALISIEREN:
Hier ist ein Beispiel mit Code:

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

Das funktioniert super. Aber im Gegensatz zu anderen Formularsteuerelementen haben Optionsfelder ein separates Feld für jeden Wert:

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

Was zu tun ist?

Funktioniert das Label-Tag mit Optionsfeldern?

Ja

Wenn ja, wie verwenden Sie es?

Genauso wie bei jedem anderen Formularsteuerelement.

Entweder gibst du ihm ein for Attribut, das mit dem übereinstimmt id des Steuerelements, oder Sie platzieren das Steuerelement innerhalb des Label-Elements.

Ich möchte das Label-Tag für jedes Label in der linken Spalte verwenden

Ein Etikett ist z a Kontrolle, nicht eine Reihe von Kontrollen.

Wenn Sie eine Reihe von Steuerelementen beschriften möchten, verwenden Sie a <fieldset> mit einer <legend> (und gib a <label> zu jedem Steuerelement im Satz).

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

Ah ja. So funktioniert das.

<label> Etiketten einzelne Felderalso jeweils <input type="radio"> bekommt sein eigenes <label>.

A beschriften Gruppe von Feldern (z. B. mehrere Optionsfelder, die sich das gleiche teilen name), verwenden Sie a <fieldset> taggen mit a <legend> Element.

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

Du kannst den … benutzen aria-role="radiogroup" um die Steuerelemente zuzuordnen, ohne a zu verwenden <fieldset>. Das ist eine der von WCAG 2.0 vorgeschlagenen Techniken.

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

Mir ist jedoch aufgefallen, dass mit dieser Technik das WebAim Wave-Tool eine Warnung vor einem Fehlen ausgibt <fieldset>daher bin ich mir nicht sicher, wie die AT-Unterstützung dafür ist.

Sie können eine Beschriftung nicht für eine Reihe von Schaltflächen deklarieren, sondern für jede Schaltfläche. In diesem Fall lauten die Labels “Mr.”, “Mrs.” und “Fräulein”, nicht “Anrede”.

AKTUALISIEREN

Vielleicht solltest du einfach ein anderes Tag für dieses deine “Label” verwenden – da es nicht wirklich ein Label ist.

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

meine 2 Cent zum Thema, oder besser gesagt ein Nebenknoten (es verwendet keine implizite Assoziation, um irgendwo platziert werden zu können, sondern Verlinkung):
Gruppierung erfolgt durch die name Attribut und verlinken bis zum id Attribut:

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

Um Ihre Frage zu beantworten: Nein, Sie können Anrede nicht mit einem der Optionsfelder verbinden. Es würde keinen Sinn machen, wenn Sie auf Anrede klicken würden, wäre eine der Optionen ausgewählt. Stattdessen können Sie Herrn, Frau und Fräulein ihre eigenen Bezeichnungen geben. Wenn also jemand auf eines dieser Wörter klickt, wird das entsprechende Optionsfeld ausgewählt.

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

Ich denke, dass Sie Anrede immer noch in a einpacken könnten <label> Element, Sie können das einfach nicht verwenden for Attribut. Ich stehe korrigiert, siehe die Kommentare unten. Obwohl es technisch möglich ist, ist es nicht was <label> war dafür gedacht.

Das „for“-Attribut des Labels entspricht der Radiobutton-ID. So…

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

Ich hoffe es hilft.

Sie möchten, dass Ihre in etwa so aussehen …

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