Gibt es eine bewährte Methode zum Verschachteln von label
und input
HTML-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>
<input />
innerhalb der<label>
, ist , dass man weglassen kannfor
undid
:<label>My text <input /></label>
in Ihrem Beispiel. So viel schöner!input
dies nicht semantisch zu a gehörtlabel
, 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 sieinput
innen oder außen sind.<label for="id">
da ich mehrere Formulare auf der Seite habe und keinid
Attribut für viele Widgets verwenden kann, ohne in dieunique id per page
Falle zu tappen. Der einzig akzeptable Weg, um auf das Widget zuzugreifen, ist überform + widget_name
.Antworten:
Ab w3: Das Etikett selbst kann vor, nach oder um das zugehörige Steuerelement positioniert werden.
oder
oder
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.
quelle
<label for="inputbox"><input id="inputbox" type="text" /></label>
ein Pass nach ihren Kriterien ist.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.ich bevorzuge
Über
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.
Code sieht meiner Meinung nach immer noch besser aus.
quelle
<label>Expires after <input name="exp" /> days</label>
(Bezeichnung ist vor und nach dem Eingabeelement)div
,li
oder?firstname
dem Etikett für folgen solltefirstname
, 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.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.
quelle
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.
Wenn Sie zwischen Etikett und Box klicken können, bedeutet dies:
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:
UX-Frage, die diesen Punkt ausführlich behandelt: /ux/23552/should-the-space-between-the-checkbox-and-label-be-clickable
quelle
margin
Kontrollkästchen. Das Firefox-Verhalten in Ihrem Beispiel ist eigenartig und scheint ein Fehler zu sein. Alabel
enthä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: block
In diesem Fall kann das Innere des Etikettsblock
in allen Browsern angeklickt werden.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):
Damit kann ich Tabellen und all den Müll in meinen Formularen vermeiden.
quelle
<br />
die Eingaben zu trennen?<label> <span>My text</span> <input /> </label>
Ihnen haben Sie alle Styling-Optionen, die Sie (jemals) benötigen würden.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:
Implizit:
quelle
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.
quelle
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.
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.
quelle
for
... und wenn Sie es verwenden möchten,for
macht es wenig Sinn, das Steuerelement im Etikett zu haben .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.
quelle
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
um eine korrekte vertikale Ausrichtung der Funkgeräte zu gewährleisten.
quelle
In Bezug auf WHATWG ( Schreiben der Benutzeroberfläche eines Formulars ) ist es nicht falsch, das Eingabefeld in das Etikett einzufügen. Dies spart Ihnen Code, da das
for
Attribut vonlabel
nicht mehr benötigt wird.quelle
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.
quelle
Eine Sache, die Sie berücksichtigen müssen, ist die Interaktion von Kontrollkästchen und Funkeingängen mit Javascript.
Unter Verwendung der folgenden Struktur:
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.
quelle
Der Hauptvorteil der Platzierung
input
innerhalb vonlabel
ist die Typisierungseffizienz für Menschen und die Bytespeicherung für Computer.@Znarkus sagte in seinem Kommentar zum OP,
Hinweis: Im @ Znarknus-Code wurde eine andere Effizienz aufgenommen, die im Kommentar nicht explizit angegeben ist.
type="text"
kann auch weggelassen werden undinput
rendert standardmäßig ein Textfeld.Ein Nebeneinander-Vergleich von Tastenanschlägen und Bytes [1].
31 Tastenanschläge, 31 Bytes
58 Tastenanschläge, 58 Bytes
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
quelle