Soll ich Eingabeelemente in ein Beschriftungselement einfügen?

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>

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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 forAttribut von labelnicht mehr benötigt wird.

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.

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.

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