it-swarm.com.de

Zwei Eingabefelder innerhalb eines Labels

Folgendes berücksichtigen:

<label>Range from 
    <input name='min_value'/> to
    <input name='max_value' />
</label>

Ist dies semantisch korrekt, da in den W3C-Empfehlungen angegeben ist, dass ein Label mit genau einem Formularsteuerelement verknüpft ist?

Durch Klicken in die zweite Eingabe wird der Fokus sofort zur ersten Eingabe verschoben. Kann das verhindert werden?

Wie würde man eine Min/Max-Eingangskombination markieren, um zu zeigen, dass zwei Eingänge zusammengehören?

29
sqwk

Nein, es ist nicht korrekt (da, wie Sie feststellen, eine label genau mit one Formulareingabe verknüpft ist).

Um eine Gruppe zusammengehöriger Eingaben zu kennzeichnen, verwenden Sie einen <fieldset> und einen <legend>:

<fieldset>
  <legend>Range</legend>
  <label for="min">Min</label>
  <input id="min" name="min" />

  <label for="max">Max</label>
  <input id="max" name="max" />
</fieldset>

Verweise:

44
David Thomas

Wie die akzeptierte Antwort sagt, ist das nicht richtig, aber ich denke, es gibt bessere Wege, dies zu tun.

Zugängliche Alternativen:

Option 1 (mit dem aria-label-Attribut):

Range:
<input ... aria-label='Range start' />
<input ... aria-label='Range end' />

Option 2 (mit versteckten label-Tags): 

<label for='start'>Range start</label>
<input type='text' id='start' />

<label for='end' class='hidden'>Range end</label>
<input type='text' id='end' />

Wo die .hidden-Klasse nur von Bildschirmleseprogrammen lesbar ist .

Option 3 (mit aria-labelledby-Attributen):

<label id='lblRange'>Range</label>
<input type='text' id='start' aria-labelledby='lblRange' />
<input type='text' id='end' aria-labelledby='lblRange' />

Vorteile der Option # 1: Jede input hat eine gute Beschreibung, die andere Vorschläge (z. B. das Hinzufügen eines "to" - Labels) nicht tun. Die Optionen Nr. 2 und Nr. 3 sind für diesen speziellen Fall möglicherweise nicht die besten, für ähnliche Fälle jedoch erwähnenswert.

Quelle: http://webaim.org/techniques/forms/advanced

13
Diego Jancic

Ich sehe viele Antworten, die besagen, dass es falsch ist, zwei Eingaben in ein Label einzufügen .. Dies ist eigentlich eine falsche Aussage in HTML5. Der Standard erlaubt es ausdrücklich: http://www.w3.org/TR/html5/forms.html#the-label-element

Wenn das for-Attribut nicht angegeben ist, das label-Element jedoch ein label-abkömmliches Element besitzt, ist das first -Objekt in Baumstruktur das beschriftete Element des label-Elements.

Wenn für ein Labelelement ein anderer interaktiver Inhalt als sein Labelelement vorhanden ist, muss das Aktivierungsverhalten des Labelelements für Ereignisse, die auf diese interaktiven Inhalte und deren Nachkommen abzielen, nichts anderes tun.

Der html5-Standard wird hier jedoch nicht beachtet (getestet unter iOS 11.3). Wer also mit Safari kompatibel sein möchte, muss hier entweder Abhilfe schaffen oder warten, bis Apple seinen Browser repariert.

4
user1448926

Wie wäre es damit:

<label> Range from <input name='min_value'> </label>
<label> to <input name='max_value'> </label>
3
Šime Vidas

Gemäß kann dieses - Label nur eine Eingabe enthalten, da es mit nur einem - Steuerelement verknüpft werden soll. Wenn Sie die Eingabe in das Label einfügen, wird das for-Attribut entfernt (automatische Verknüpfung). 

Daher sollten Sie entweder die Eingabe single in label eingeben oder das Attribut for angeben, das auf die Eingabe id verweist, und nicht die Eingabe in label.

3
zysoft

1 LABEL = 1 EINGABE !!!

Wenn Sie 2 EINGÄNGE in ein LABEL einfügen, funktioniert dies NICHT in Safari (und iPad und iPhone) ... da beim Klicken auf LABEL automatisch das erste EINGABE fokussiert wird ... ist die zweite Eingabe unmöglich.

1
Martin Zvarík