Verwenden von "Beschriftung für" auf Optionsfeldern

136

Wenn Sie den Parameter "label for" für Optionsfelder verwenden, um 508-konform * zu sein, ist Folgendes richtig?

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

oder ist das

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

Der Grund, den ich frage, ist, dass im zweiten Beispiel "label" nur den Text und nicht das eigentliche Optionsfeld umfasst.

* Gemäß Section 508 des Rehabilitationsgesetzes von 1973 müssen Bundesbehörden Menschen mit Behinderungen den Zugang zu Software und Websites ermöglichen.

— Niico
quelle

Antworten:

216

Sie haben es fast geschafft. Es sollte dies sein:

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

Erweitern Sie das Snippet

Der Wert in forsollte die ID des Elements sein, das Sie beschriften.

— Marc W.
quelle

Ihre Antwort ist natürlich wahr, aber Martha hat die richtige Antwort. Beide Martha-Beispiele sind vollkommen gültiges HTML5. Und wenn Sie beispielsweise möchten, dass sich das Ganze in einem Frame befindet, ist es einfacher, das zweite mit CSS zu formatieren. Wenn Sie möchten, dass sich die Etiketten an einem anderen Ort befinden, zuerst. Aber beide sind in Ordnung. Freundliche Grüße!

— Jacek Kowalewski

Hmm .. Wie lässt sich ein Etikett zwischen zwei Optionsfeldern umschalten? Sie können nicht zwei identische IDs haben ...: /

— Nils Sens

@NilsSens Jedes Radio- und Label-Paar sollte eindeutige IDs haben, die sie niemals gemeinsam nutzen sollten

— Daniel Waters

@NilsSens Zwischen 2 Optionsfeldern wechseln und sie haben nur 1 Beschriftung? Das klingt nach einem klaren Fall, stattdessen ein Kontrollkästchen zu verwenden: D

— T_D

Ah, nein, was ich meinte, war ein Super-Label, das die Optionsfelder umschaltet. Wie: Kategorie Lieblingsfrucht und wenn Sie auf diese klicken, wechseln Sie zwischen idk "Banane" und "Erdbeere". Warum sollten Sie die Mausbewegung UX erzwingen, wenn Sie nur die Optionen umschalten können? Heute würde ich JS verwenden, um es einfach von Hand zu codieren, aber es wäre interessant zu wissen, ob es nur einen CSS-Weg gibt :)

— Nils Sens

Jede Struktur ist gültig und zugänglich, aber das forAttribut sollte dem iddes Eingabeelements entsprechen:

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

oder

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

Das forAttribut ist in der zweiten Version optional (Beschriftung mit Eingabe), aber IIRC gab es einige ältere Browser, die den Beschriftungstext nur dann anklickbar machten, wenn Sie ihn einbezogen haben. Die erste Version (Beschriftung nach Eingabe) lässt sich mit CSS mithilfe des nebenstehenden Geschwister-Selektors einfacher gestalten +:

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

— Martha
quelle

True, obwohl im zweiten Beispiel das Attribut "for" nicht erforderlich ist.

— Ishmael

Ich denke, es gab einige Browserversionen, die den Schaltflächentext nur dann "anklickbar" machten, wenn Sie das Attribut "für" verwendeten, dh das Einschließen der Eingabe in das Etikett reichte nicht aus.

— Martha

@Martha - Weißt du welche Browser?

— Kirkland

@Kirkland - w3.org/TR/html401/interact/forms.html#h-17.9 scheint darauf hinzudeuten, dass das zweite Formular gültig ist, aber mehrere Quellen weisen darauf hin, dass die Unterstützung möglicherweise nicht universell ist. Es ist wahrscheinlich forin jedem Fall am besten, das Attribut anzugeben.

— Ishmael

@RalphDavidAbernathy Ja, für Kontrollkästchen gelten dieselben Regeln.

— Ishmael

(Lesen Sie zuerst die anderen Antworten, die forin den <label></label>Tags erläutert wurden . Nun, beide Top-Antworten sind korrekt, aber für meine Herausforderung war es, wenn Sie mehrere Optionsfelder haben, sollten Sie für sie einen gemeinsamen Namen wie aber mit unterschiedlichen IDs auswählenname="r1" id="r1_1" ... id="r1_2"

Auf diese Weise ist die Antwort klarer und beseitigt auch die Konflikte zwischen Namen und IDs.

Sie benötigen unterschiedliche IDs für unterschiedliche Optionen der Optionsbox.

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

Erweitern Sie das Snippet

— Ebrahim
quelle