it-swarm.com.de

Verwenden des HTML-Tags "label" mit Optionsfeldern

Funktioniert das Tag label mit Optionsfeldern? Wenn ja, wie benutzt du es? Ich habe ein Formular, das wie folgt angezeigt wird:

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

Ich möchte das Tag label für jedes Label in der linken Spalte verwenden, um die Verbindung zum entsprechenden Control in der rechten Spalte zu definieren. Wenn ich jedoch ein Optionsfeld verwende, scheint die Spezifikation darauf hinzudeuten, dass das eigentliche Label "Anrede" für das Formularsteuerelement plötzlich nicht mehr in das Tag label gehört, sondern in die Optionen "Mr., Mrs., etc." . " Gehe in den Tag label.

Ich war schon immer ein Fan von Barrierefreiheit und dem Semantic Web, aber dieses Design macht für mich keinen Sinn. Das Tag label deklariert Beschriftungen explizit. Die option Tag-Auswahloptionen. Wie deklarieren Sie ein label auf dem tatsächlichen Etikett für eine Reihe von Optionsfeldern?

PDATE: 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. Im Gegensatz zu anderen Formularsteuerelementen haben Optionsfelder für jeden Wert ein separates Feld:

<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 ist zu tun?

46
GlenPeterson

Funktioniert das Label-Tag mit Optionsfeldern?

Ja

Wenn ja, wie benutzt du es?

Wie bei jeder anderen Formularsteuerung.

Sie geben ihm entweder ein for-Attribut, das mit dem id des Steuerelements übereinstimmt, oder Sie fügen das Steuerelement in das label-Element ein.

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

Eine Bezeichnung steht für a control und nicht für eine Reihe von Steuerelementen.

Wenn Sie eine Reihe von Steuerelementen mit einer Beschriftung versehen möchten, verwenden Sie ein <fieldset> mit einer <legend> (und gib ein <label> zu jedem Steuerelement im Set).

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

Ah ja. So funktioniert das.

<label> beschriftet einzelne Felder , daher jedes <input type="radio"> bekommt sein eigenes <label>.

Um eine Gruppe von Feldern zu kennzeichnen (z. B. mehrere Optionsfelder, die dasselbe name verwenden), verwenden Sie ein <fieldset> Tag mit einem <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>
18
Paul D. Waite

Du kannst den ... benutzen aria-role="radiogroup" zum Verknüpfen der Steuerelemente ohne Verwendung eines <fieldset>. Dies 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>

Ich habe jedoch festgestellt, dass mit dieser Technik das WebAim Wave-Tool eine Warnung über ein fehlendes <fieldset>, also bin ich mir nicht sicher, wie die AT Unterstützung dafür ist.

4
Scribblemacher

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

UPDATE
Vielleicht solltest du einfach ein anderes Etikett für dieses "Etikett" von dir verwenden - da es nicht wirklich ein Etikett 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>
3
Seza

Um Ihre Frage zu beantworten: Nein, Sie können Anrede nicht mit einem der Optionsfelder verbinden. Es wäre nicht sinnvoll, wenn Sie auf Anrede klicken würden, eine der Optionen ausgewählt würde. 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 glaube, dass Sie Salutation immer noch in ein <label> - Element einschließen können, Sie können einfach das for -Attribut nicht verwenden. Ich stehe korrigiert, siehe die Kommentare unten. Obwohl es technisch möglich ist, ist es nicht das, wofür <label> Gedacht war.

1
Nic Wortel

meine 2 Cent zum Thema, oder eher ein Nebenknoten (es wird keine implizite Zuordnung verwendet, um irgendwo platziert zu werden, sondern eine Verknüpfung) : - Gruppierung erfolgt durch das name Attribut und Verknüpfung durch das 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>
1
BananaAcid

Das 'for'-Attribut des Labels entspricht der ID der Optionsfelder. So...

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

Ich hoffe es hilft.

Sie möchten, dass Ihre so etwas aussieht ...

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