Soll ich Eingabeelemente in ein Beschriftungselement einfügen?

606

Gibt es eine bewährte Methode zum Verschachteln von labelund inputHTML-Elementen?

klassischer Weg:

<label for="myinput">My Text</label>
<input type="text" id="myinput" />

oder

<label for="myinput">My Text
   <input type="text" id="myinput" />
</label>
jpsimard-nyx
quelle
107
Einer der großen Vorteile von der Umsetzung <input />innerhalb der <label>, ist , dass man weglassen kann forund id: <label>My text <input /></label>in Ihrem Beispiel. So viel schöner!
Znarkus
16
Obwohl ich damit einverstanden bin, dass inputdies nicht semantisch zu a gehört label, habe ich heute festgestellt, dass die Entwickler von Bootstrap nicht mit mir übereinstimmen . Einige Elemente, wie z. B. Inline-Kontrollkästchen, sind unterschiedlich gestaltet, je nachdem, ob sie inputinnen oder außen sind.
Blazemonger
6
Übrigens war dies eine wirklich schlechte Idee, <label for="id">da ich mehrere Formulare auf der Seite habe und kein idAttribut für viele Widgets verwenden kann, ohne in die unique id per pageFalle zu tappen. Der einzig akzeptable Weg, um auf das Widget zuzugreifen, ist über form + widget_name.
MaxZoom
5
@MaxZoom Wenn Ihre Seite so viele verschiedene Formulare mit identischen Feldnamen enthält, dass Sie Probleme haben, eindeutige IDs zu finden, sollten Sie Ihr Seitendesign ein wenig überdenken, IMHO. Natürlich kenne ich Ihre Situation nicht, aber das riecht nur schlecht für mich
Ken Bellows
5
@kenbellows Es ist eine Designer- / Geschäftsidee (nicht meine), zwei Suchformulare auf einer Seite zu platzieren. Die besten Methoden für die Benutzererfahrung können sich im Laufe der Zeit ändern, aber der HTML-Code sollte flexibel genug sein (IMHO), um alle sichtbaren Szenarien abzudecken.
MaxZoom

Antworten:

529

Ab w3: Das Etikett selbst kann vor, nach oder um das zugehörige Steuerelement positioniert werden.

<label for="lastname">Last Name</label>
<input type="text" id="lastname" />

oder

<input type="text" id="lastname" />
<label for="lastname">Last Name</label>

oder

<label>
   <input type="text" name="lastname" />
   Last Name
</label>

Beachten Sie, dass die dritte Technik nicht verwendet werden kann, wenn eine Tabelle für das Layout verwendet wird, wobei sich die Beschriftung in einer Zelle und das zugehörige Formularfeld in einer anderen Zelle befindet.

Beides ist gültig. Ich verwende entweder das erste oder das zweite Beispiel, da es Ihnen mehr Stilkontrolle gibt.

superUntitled
quelle
14
Wie beantwortet, sind alle gültig, aber in meiner eigenen Praxis entscheide ich mich normalerweise für das erste Beispiel, das hier von superUntitled für Textfelder, Textbereiche und Auswahlen gegeben wird. Für Optionsfelder und Kontrollkästchen verwende ich normalerweise das dritte Beispiel, in dem ich die Eingabe vor dem Begleittext und nicht die gleiche feste Breite und / oder Gleitkomma möchte, die die übrigen Beschriftungen und Felder verwenden. In jedem einzelnen Formular verwende ich möglicherweise beide Formate zusammen.
Funka
6
Ich frage mich, ob <label for="inputbox"><input id="inputbox" type="text" /></label>ein Pass nach ihren Kriterien ist.
Matt
64
Schade, dass Sie ein Label nicht in einem Input-Tag verschachteln können. Wäre semantisch viel rationaler, da das Label wirklich eine Eigenschaft der Eingabe ist, wenn man es aus abstrakter Sicht betrachtet.
Alex
9
Das verknüpfte WCAG-Dokument enthält die folgende Option: "Das Steuerelement ist in einem Beschriftungselement enthalten, das den Beschriftungstext enthält." Ich weiß nicht, ob dies in den Jahren seit dem Kommentar von @Sorcy hinzugefügt wurde, aber das Input-in-Label-Szenario wird jetzt als gültig angesehen.
Alex Weitzer
6
Es gibt ein Problem mit der Eingabe innerhalb des Etiketts, zumindest in Chrome. Wenn Sie einen Klickereignishandler an das Etikett anhängen, wird der Handler zweimal ausgelöst, wenn auf das Etikett geklickt wird. Sie können dies mit return false;am Ende des Handlers erreichen. Wenn Sie jedoch möglicherweise andere Handler haben, die anschließend ausgeführt werden müssen, und das Stoppen der Weitergabe keine Option ist, wird dies zu einem Problem.
Wired_in
67

ich bevorzuge

<label>
  Firstname
  <input name="firstname" />
</label>

<label>
  Lastname
  <input name="lastname" />
</label>

Über

<label for="firstname">Firstname</label>
<input name="firstname" id="firstname" />

<label for="lastname">Lastname</label>
<input name="lastname" id="lastname" />

Hauptsächlich, weil es den HTML-Code lesbarer macht. Und ich denke tatsächlich, dass mein erstes Beispiel mit CSS einfacher zu gestalten ist, da CSS mit verschachtelten Elementen sehr gut funktioniert.

Aber es ist wohl Geschmackssache.


Wenn Sie weitere Stiloptionen benötigen, fügen Sie ein Span-Tag hinzu.

<label>
  <span>Firstname</span>
  <input name="firstname" />
</label>

<label>
  <span>Lastname</span>
  <input name="lastname" />
</label>

Code sieht meiner Meinung nach immer noch besser aus.

Znarkus
quelle
3
Das Einfügen der Eingabe in das Etikett entspricht der Verwendung von HTML für das Layout.
Emil
8
Ich mag diese Lösung auch für Fälle wie diesen: <label>Expires after <input name="exp" /> days</label>(Bezeichnung ist vor und nach dem Eingabeelement)
Philipp
Ich denke, das letzte Beispiel unterscheidet sich - abgesehen von den Attributen for und id - nicht wirklich davon, dass das Label neben der Eingabe steht und beide in ein oder was nicht verpackt sind div, lioder?
Retrovertigo
1
@retrovertigo - funktional? Nein. Es reduziert nur das Markup und die semantische Überbeanspruchung von Begriffen. Wir wissen, dass die Eingabe firstnamedem Etikett für folgen sollte firstname, aber Browser benötigen die Deklaration. Es ist alles eine Frage des Geschmacks und was SIE in Ihrem Code für am besten halten (und am einfachsten zu debuggen sind). Ich bevorzuge es jetzt, verschachtelt zu verwenden, obwohl es eine Weile gedauert hat, bis ich mich daran gewöhnt habe.
Xhynk
3
@MPavlak - ein kurzer Blick und ich fand diese Anleitung von w3.org. w3.org/WAI/tutorials/forms/labels . Ich habe dann w3.org/TR/WCAG20-TECHS/H44.html überprüft . Unten (es ist dunkel) heißt es, dass Sie die Testkriterien bestehen müssen, um Konformität zu beanspruchen, und dass speziell das Attribut for verwendet werden sollte. In Wirklichkeit funktionierten implizite Labels nicht, als ich dies zuletzt in Apple Voiceover testete (10% Screenreader-Desktop mit Marktanteil, 60% mobile Screenreader mit Marktanteil), sodass dies ein weiterer wichtiger Faktor war. Ich hoffe, das hilft!
James Westgate
39

Wenn Sie das Eingabe-Tag in das Label-Tag aufnehmen, müssen Sie das Attribut 'for' nicht verwenden.

Trotzdem möchte ich das Eingabe-Tag nicht in meine Beschriftungen aufnehmen, da ich denke, dass sie separate Entitäten sind und keine Entitäten enthalten.

Terry
quelle
8
Das für erfordert jedoch die Verwendung einer ID, was die hierarchische Strukturierung des Layouts sehr schwierig macht :-(
lethalman
39

Verhaltensunterschied: Klicken Sie in den Bereich zwischen Beschriftung und Eingabe

Wenn Sie auf das Leerzeichen zwischen dem Etikett und der Eingabe klicken , wird die Eingabe nur aktiviert, wenn das Etikett die Eingabe enthält.

Dies ist sinnvoll, da in diesem Fall das Leerzeichen nur ein weiteres Zeichen des Etiketts ist.

<p>Inside:</p>

<label>
  <input type="checkbox" />
  |&lt;----- Label. Click between me and the checkbox.
</label>

<p>Outside:</p>

<input type="checkbox" id="check" />
<label for="check">|&lt;----- Label. Click between me and the checkbox.</label>

Wenn Sie zwischen Etikett und Box klicken können, bedeutet dies:

  • einfacher zu klicken
  • weniger klar, wo die Dinge beginnen und enden

Beispiele für das Bootstrap-Kontrollkästchen v3.3 verwenden die folgenden Eingaben: http://getbootstrap.com/css/#forms Es kann sinnvoll sein, diesen zu folgen. Aber sie haben ihre Meinung in v4.0 https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios geändert, sodass ich nicht mehr weiß, was klug ist:

Kontrollkästchen und Radios unterstützen die HTML-basierte Formularvalidierung und bieten präzise, ​​zugängliche Beschriftungen. Als solche sind unsere <input>s und <label>s Geschwisterelemente im Gegensatz zu einem <input>innerhalb eines <label>. Dies ist etwas ausführlicher , wie Sie ID angeben müssen , und für Attribute der beziehen <input>und <label>.

UX-Frage, die diesen Punkt ausführlich behandelt: /ux/23552/should-the-space-between-the-checkbox-and-label-be-clickable

Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
quelle
Dies ist kein Spezifikationsunterschied. Der Umschalter funktioniert in beiden Fällen in allen kompatiblen Browsern.
Hexalys
@hexalys Danke für den Bericht. Ich habe die Antwort aktualisiert. Meinen Sie, dass kompatible Browser in beiden Fällen umschalten sollten oder nicht? Wenn Sie auf die entsprechende Standardpassage verlinken könnten, wäre das großartig.
Ciro Santilli 法轮功 冠状 病 六四 事件 26
1
Ja. Obwohl ich nicht bemerkt habe, dass Ihr Beispiel irreführend ist, weil Ihr Leerzeichen nicht wirklich ein Textbereich ist . Es ist ein marginKontrollkästchen. Das Firefox-Verhalten in Ihrem Beispiel ist eigenartig und scheint ein Fehler zu sein. A labelenthält die Leerzeichen oder Auffüllungen um Inline-Inhalte als anklickbar. Da das Inhaltsmodell eines Etiketts Inline- / Phrasierungsinhalt ist, sollte der Eingaberand nicht anklickbar sein, es sei denn, Ihr Etikett wurde erstellt. display: blockIn diesem Fall kann das Innere des Etiketts blockin allen Browsern angeklickt werden.
Hexalys
1
Beachten Sie, dass der Bootstrap-Link in der Antwort zu den Dokumenten für Version 3.3 führt. Die Dokumente für v4.0 scheinen darauf hinzudeuten, dass sie ihre Meinung geändert haben: "Kontrollkästchen und Radios unterstützen die HTML-basierte Formularvalidierung und bieten präzise, ​​zugängliche Beschriftungen. Daher unsere <input> s und <label> s sind Geschwisterelemente im Gegensatz zu einem <Eingang> innerhalb eines <Labels>. Dies ist etwas ausführlicher, da Sie die ID angeben müssen und Attribute die <Eingabe> und <Label> "in Beziehung setzen müssen.
Michael Krebs
2
Dieser Verhaltensunterschied ist der große für mich. Wenn es sich bei den Elementen um Geschwister handelt, verringert jeder Rand eines Elements die anklickbare Oberfläche , die das Eingabeelement auslöst. Durch das Verschachteln der Eingabe innerhalb des Etiketts bleibt der maximal anklickbare Bereich erhalten, sodass selbst Benutzer, die mit präzisen Maus- oder Berührungsbewegungen zu kämpfen haben, maximale Zugänglichkeit erhalten. In Bootstrap 4 funktioniert die Verschachtelung weiterhin und wird immer noch angezeigt, ohne dass Bootstrap-CSS angepasst oder überschrieben werden muss.
Turgs
17

Persönlich möchte ich das Etikett draußen lassen, wie in Ihrem zweiten Beispiel. Deshalb ist das FOR-Attribut vorhanden. Der Grund dafür ist, dass ich häufig Stile wie eine Breite auf das Etikett anwende, damit das Formular gut aussieht (Kurzform unten):

<style>
label {
  width: 120px;
  margin-right: 10px;
}
</style>

<label for="myinput">My Text</label>
<input type="text" id="myinput" /><br />
<label for="myinput2">My Text2</label>
<input type="text" id="myinput2" />

Damit kann ich Tabellen und all den Müll in meinen Formularen vermeiden.

Papageien
quelle
3
Sollten Sie die Präsentation nicht dem CSS überlassen, anstatt <br />die Eingaben zu trennen?
Znarkus
1
@Znarkus - ja, normalerweise verpacke ich sie in OL / LIs, um mit solchen Formatierungen fertig zu werden. Dies war nur ein kurzes Beispiel.
Papageien
1
@Parrots: Das macht semantisch wenig Sinn, imo. Und wenn Sie sie einwickeln müssen, warum nicht einfach mit dem Etikett umwickeln?
Znarkus
1
@Parrots Mit dieser Überlegung denke ich, dass alles auf einer Seite in ul / li gehen sollte. Und mit <label> <span>My text</span> <input /> </label>Ihnen haben Sie alle Styling-Optionen, die Sie (jemals) benötigen würden.
Znarkus
1
Wenn Sie "für" verwenden, müssen Sie eine ID verwenden, was für hierarchische Layouts schlecht ist.
Lethalman
15

Die W3-Empfehlungen finden Sie unter http://www.w3.org/TR/html401/interact/forms.html#h-17.9 .

Sie sagen, dass es so oder so gemacht werden kann. Sie beschreiben die beiden Methoden als explizit (unter Verwendung von "for" mit der ID des Elements) und implizit (Einbettung des Elements in die Beschriftung):

Explizit:

Das for-Attribut ordnet eine Bezeichnung explizit einem anderen Steuerelement zu: Der Wert des for-Attributs muss mit dem Wert des id-Attributs des zugeordneten Steuerelements übereinstimmen.

Implizit:

Um eine Beschriftung implizit einem anderen Steuerelement zuzuordnen, muss sich das Steuerelement im Inhalt des LABEL-Elements befinden. In diesem Fall darf das LABEL nur ein Steuerelement enthalten.

user470514
quelle
Ich habe gerade festgestellt, dass das Implizite im IE nicht funktioniert ... irgendwelche Ideen?
Carinlynchin
11

Beide sind korrekt, aber das Einfügen der Eingabe in das Etikett macht es beim Styling mit CSS viel weniger flexibel.

Erstens ist a <label>eingeschränkt, in welchen Elementen es enthalten kann . Beispielsweise können Sie nur dann einen <div>zwischen den <input>und den Beschriftungstext einfügen, wenn sich der <input>nicht innerhalb des Textes befindet <label>.

Zweitens gibt es zwar Problemumgehungen, die das Stylen vereinfachen, z. B. das Umschließen des inneren Beschriftungstextes mit einer Spanne, einige Stile werden jedoch von übergeordneten Elementen übernommen, was das Stylen komplizierter machen kann.

Nicholaides
quelle
viel weniger flexibel? Kannst du das näher erläutern? Wie andere bereits erwähnt haben, können Sie den inneren Beschriftungstext einfach mit einer Spanne umschließen, es sei denn, dies macht ihn weniger flexibel.
MPavlak
7

Ein bemerkenswertes 'Gotcha' schreibt vor, dass Sie niemals mehr als ein Eingabeelement in ein <label> -Element mit einem expliziten "for" -Attribut einfügen sollten, z.

<label for="child-input-1">
  <input type="radio" id="child-input-1"/>
  <span> Associate the following text with the selected radio button: </span>
  <input type="text" id="child-input-2"/>
</label>

Während dies für Formularfunktionen verlockend sein kann, bei denen ein benutzerdefinierter Textwert einem Optionsfeld oder Kontrollkästchen nachgeordnet ist, wird durch die Klickfokusfunktion des Beschriftungselements sofort der Fokus auf das Element geworfen, dessen ID explizit in seinem Attribut 'für' definiert ist Dies macht es dem Benutzer nahezu unmöglich, in das enthaltene Textfeld zu klicken, um einen Wert einzugeben.

Persönlich versuche ich, Beschriftungselemente mit untergeordneten Eingaben zu vermeiden. Es erscheint semantisch unangemessen, dass ein Label-Element mehr als das Label selbst umfasst. Wenn Sie Eingaben in Beschriftungen verschachteln, um eine bestimmte Ästhetik zu erzielen, sollten Sie stattdessen CSS verwenden.

Aaron
quelle
4
Dies ist kein "Gotcha". Es ist ausdrücklich Teil der Spezifikation; Das Etikett kann bis zu 1 Kontrolle enthalten. Sie mischen hier auch die impliziten und expliziten Stile - wenn Sie das Steuerelement in das Etikett einfügen, brauchen Sie es nicht for... und wenn Sie es verwenden möchten, formacht es wenig Sinn, das Steuerelement im Etikett zu haben .
CHao
Stimmt, aber es scheint, dass diese Spezifikation nicht gut verstanden wird. Wir sind auf dieses Problem mit der Formular-API von Drupal 6 gestoßen, die ein Markup generiert hat, das ein Szenario erstellt hat, das dem oben beschriebenen nicht unähnlich ist. Mein Kollege und ich kratzten uns ein oder zwei Minuten am Kopf, also dachte ich, ich würde das Problem hier auslüften, um mögliche Verwirrung in der Zukunft zu vermeiden.
Aaron
Keine Notwendigkeit für "für" im Label-> Eingabeszenario. Eine Eingabe pro Etikett hat den Vorteil, dass Sie den Namen oder die ID nicht kennen müssen, und Sie können ein nettes CSS-Styling durchführen, um die Dinge zu kapseln und den Fokus zu erhalten, wenn auf ein anderes Element wie dieses geklickt wird. Unter zipstory.com/signup finden Sie beispielsweise eine saubere Vorgehensweise.
Jason Sebring
Vielen Dank; Dies beantwortete eine andere verwandte Frage, die ich hatte, nämlich ob es möglicherweise mehr als eine Eingabe innerhalb eines Etiketts gibt. (Kontext: Mehrere Optionsfeldoptionen, eine pro Zeile, wobei jeder Optionsfeldeintrag 1, 2, 3 oder möglicherweise mehr Eingaben vom Typ Text enthält, mit der Absicht, auf eine Zeile zu klicken, die das Ergebnis der Auswahl des Optionsfelds dieser Zeile enthält, falls nicht ausgewählt und ermöglicht die Bearbeitung der Eingaben / Eingaben in dieser Zeile.) Dies lässt die Tür offen, mehrere Beschriftungen für nicht eingegebenen Text im Formular zu haben, aber es beantwortete meine Frage, ob das, was ich dachte, in Ordnung war. (War es nicht.)
Christos Hayward
6

Wie die meisten Leute gesagt haben, funktionieren beide Wege tatsächlich, aber ich denke, nur der erste sollte. Da das Label semantisch streng ist, "enthält" es die Eingabe nicht. Meiner Meinung nach sollte die Containment- Beziehung (Eltern / Kind) in der Markup-Struktur die Containment in der visuellen Ausgabe widerspiegeln . Das heißt, ein Element, das ein anderes Element im Markup umgibt, sollte um dieses Element im Browser herum gezeichnet werden . Demnach sollte das Label das Geschwister der Eingabe sein, nicht das übergeordnete. Option Nummer zwei ist also willkürlich und verwirrend. Jeder, der das gelesen hat Zen von Python wird wahrscheinlich zustimmen (Flat ist besser als verschachtelt, Sparse ist besser als dicht, es sollte einen - und vorzugsweise nur einen - offensichtlichen Weg geben, dies zu tun ...).

Aufgrund solcher Entscheidungen von W3C und großen Browser-Anbietern (die zulassen, "wie auch immer Sie es bevorzugen", anstatt "es richtig zu machen"), ist das Web heute so durcheinander und wir Entwickler müssen uns mit Wirren auseinandersetzen und so vielfältiger Legacy-Code.

slashCoder
quelle
5

Normalerweise gehe ich mit den ersten beiden Optionen. Ich habe ein Szenario gesehen, in dem die dritte Option verwendet wurde, als Radiooptionen in Labels eingebettet waren und das CSS so etwas enthielt

label input {
    vertical-align: bottom;
}

um eine korrekte vertikale Ausrichtung der Funkgeräte zu gewährleisten.

Victor Ionescu
quelle
2

Ich ziehe es sehr vor, Elemente in meine zu verpacken, <label>da ich die IDs nicht generieren muss.

Ich bin ein Javascript-Entwickler und React oder Angular werden verwendet, um Komponenten zu generieren, die von mir oder anderen wiederverwendet werden können. Es wäre dann einfach, eine ID auf der Seite zu duplizieren , was zu seltsamen Verhaltensweisen führen würde.

Nicolas Zozol
quelle
1

Eine Sache, die Sie berücksichtigen müssen, ist die Interaktion von Kontrollkästchen und Funkeingängen mit Javascript.

Unter Verwendung der folgenden Struktur:

<label>
  <input onclick="controlCheckbox()" type="checkbox" checked="checkboxState" />
  <span>Label text</span>
</label>

Wenn der Benutzer auf "Beschriftungstext" klickt, wird die Funktion controlCheckbox () einmal ausgelöst.

Wenn Sie jedoch auf das Eingabe-Tag klicken, wird die Funktion controlCheckbox () in einigen älteren Browsern möglicherweise zweimal ausgelöst. Dies liegt daran, dass sowohl Eingabe- als auch Beschriftungs-Tags ein an das Kontrollkästchen angehängtes Ereignis zum Klicken auslösen.

Dann haben Sie möglicherweise einige Fehler in Ihrem CheckboxState.

Ich bin in letzter Zeit auf dieses Problem in IE11 gestoßen. Ich bin mir nicht sicher, ob moderne Browser Probleme mit dieser Struktur haben.

Mariusz
quelle
-1

Der Hauptvorteil der Platzierung inputinnerhalb vonlabel ist die Typisierungseffizienz für Menschen und die Bytespeicherung für Computer.

@Znarkus sagte in seinem Kommentar zum OP,

Einer der großen Vorteile von der Umsetzung <input />innerhalb der <label>, ist , dass man weglassen kann forund id: <label>My text <input /></label>in Ihrem Beispiel. So viel schöner!

Hinweis: Im @ Znarknus-Code wurde eine andere Effizienz aufgenommen, die im Kommentar nicht explizit angegeben ist. type="text"kann auch weggelassen werden und inputrendert standardmäßig ein Textfeld.

Ein Nebeneinander-Vergleich von Tastenanschlägen und Bytes [1].

31 Tastenanschläge, 31 Bytes

<label>My Text<input /></label>

58 Tastenanschläge, 58 Bytes

<label for="myinput">My Text</label><input id="myinput" />

Ansonsten sind die Snippets visuell gleich und bieten den gleichen Grad an Benutzerzugänglichkeit. Ein Benutzer kann auf die Beschriftung klicken oder darauf tippen, um den Cursor in das Textfeld zu setzen.

[1] Textdateien (.txt), die im Editor unter Windows erstellt wurden, Bytes aus den Eigenschaften des Windows-Datei-Explorers

ThisClark
quelle