Kann ein Eingabefeld zwei Label haben?

Mary hatte ein kleines Formular und seine Felder, auf denen beschriftet ist einfach so.
Sobald ein Fehler eingeschlichen, der Verwirrung, es wäre sau.

Ich habe eine Beschriftung für jeden Eingangs-Bereich... ein ziemlich standard-Affäre.
Nach der überprüfung der form, ich bin Anzeige eine hilfreiche kleine Absatz an der Spitze der form, Detaillierung, welche Informationen fehlen oder falsch sind.

Kann ich habe zwei Bezeichnungen für den gleichen input-Feld? Zum einen in der form richtiger, und eine in der Validierung Erinnerung text? Gibt es einen Grund, das darf ich nicht tun?

InformationsquelleAutor der Frage aslum | 2010-05-13

  1. 118

    Ich nehme an, diese Frage ist über HTML-Formulare. Aus der Spezifikation:

    Das LABEL-element kann verwendet werden, zum anfügen von Informationen zu Kontrollen. Jedes LABEL-element verbunden ist mit genau einem Formular-Steuerelement.

    Also, jedes Formular-Steuerelement verwiesen werden kann, die von mehreren labels, aber jede Bezeichnung kann nur auf eine Kontrolle. Also, wenn es sinnvoll ist, eine zweite Bezeichnung für ein Steuerelement (und in der situation, die Sie beschreiben, es tut), dann fühlen sich frei, fügen Sie eine zweite label.

    InformationsquelleAutor der Antwort James Sumners

  2. 33

    HTML ist legal, und es funktioniert (Klick auf die Etiketten übertragen wird das Feld den Fokus in Frage).

    Es ist ein wenig schwieriger, das richtige zu tun für die Zugänglichkeit von Gründen.

    Es ist nicht ein "gemeinsames" Konzept, und weil der, dass mindestens eine gängige screen-reader (getestet habe ich mit NVDA) liest nur das erste Etikett, wenn Sie den Fokus in das Feld-es ignoriert alle weiteren Bezeichnungen für das gleiche Feld.

    So, wenn die Fehlermeldung oben auf der Seite, die für blinde oder sehbehinderte Benutzer Navigation mit der Tabulatortaste durch die Felder hören, nur die Fehlermeldung bei der Landung auf dem Spielfeld in Frage, nicht die "real" - label daneben.

    Daher-wenn Sie Satz die Fehlermeldung richtig, das könnte eine gute Sache (sicherlich besser als einfach nur zu markieren, die nicht-validierende Feld in rot!).

    InformationsquelleAutor der Antwort Rob Whelan

  3. 22

    Ja, Sie können mehrere Etiketten-Punkt in der gleichen Formular-Steuerelement. Dies ist vollkommen legal:

    <label for="fname">First name</label>
<label for="fname">Enter your info</label>
<label for="fname">Why not a third label</label>
<input type="text" id="fname" name="fname">

    Dies ist nur ein Beispiel... normalerweise würden Sie wickeln Sie diese Zeilen mit einem label, da Sie in der Nähe sind.

    InformationsquelleAutor der Antwort Gert Grenander

  4. 1

    Habt Ihr probiert, was passiert? Wenn es funktioniert, ich glaube nicht, es würde keinen Schaden verursachen, um Ihre form noch auf der Seite. Und du bekommst ein plus, denn die verwenden werden können, klicken Sie auf die Validierung Fehler und erhalten den Fokus auf das richtige Feld.

    InformationsquelleAutor der Antwort Felipe Cypriano

  5. 1

    Ich habe es nicht ausprobiert, aber ich denke, es wird möglich sein. Aber ich weiß nicht empfehlen zu benutzen, da ein label definiert, was das Feld für eine Fehlermeldung nicht. Also sollte ich nicht mit einem label zur Validierung Warnungen.

    InformationsquelleAutor der Antwort Guido Hendriks

  6. 0

    Zwar legal, es ist nicht der beste Weg, zu verbinden mehrerer Etiketten mit einem einzigen <input> element. Verwenden Sie stattdessen die aria-labelledby Attribut.

    Gibst du zuerst einzigartigen id Attribute der <label> Elemente. Sie geben dann eine aria-labelledby - Attribut auf die <input> element, setzt es den Wert der id Werte aus der <label> Elemente, getrennt durch ein Leerzeichen.

    Hier ist das Beispiel aus der "Über das aria-labelledby-Attribut" Seite im MDN web-docs:

    <div id="billing">Billing</div>

<div>
    <div id="name">Name</div>
    <input type="text" aria-labelledby="billing name"/>
</div>
<div>
    <div id="address">Address</div>
    <input type="text" aria-labelledby="billing address"/>
</div>

    InformationsquelleAutor der Antwort John S

Schreibe einen Kommentar