Sollte ich Eingabeelemente in ein Beschriftungselement einfügen?

Question

Gibt es eine bewährte Praxis für die Verschachtelung von label y input HTML-Elemente?

klassische Weise:

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

oder

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

Answer 1

Ich ziehe es sehr vor, Elemente innerhalb meiner <label> weil ich die Kennungen nicht generieren muss.

Ich bin ein Javascript-Entwickler, und React oder Angular werden verwendet, um Komponenten zu erzeugen, die von mir oder anderen wiederverwendet werden können. Es wäre dann einfaches Duplizieren einer ID auf der Seite, was dort zu seltsamen Verhaltensweisen führt.

Answer 2

Unter Bezugnahme auf die WHATWG ( Schreiben einer Benutzeroberfläche für ein Formular ) ist es nicht falsch, das Eingabefeld innerhalb des Etiketts zu platzieren. Dies spart Ihnen Code, da die for Attribut aus dem label ist nicht mehr erforderlich.

Answer 3

Eine Sache, die Sie beachten müssen, ist die Interaktion von Kontrollkästchen und Radio-Eingaben mit Javascript.

Unter Verwendung der folgenden Struktur:

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

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

Wenn jedoch das input-Tag angeklickt wird, kann die Funktion controlCheckbox() in einigen älteren Browsern zweimal ausgelöst werden. Das liegt daran, dass sowohl input- als auch label-Tags das onclick-Ereignis auslösen, das mit der Checkbox verbunden ist.

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

Ich habe dieses Problem in letzter Zeit mit dem IE11 festgestellt. Ich bin nicht sicher, ob moderne Browser Probleme mit dieser Struktur haben.

Answer 4

Die Verschachtelung der Eingaben in einem Etikett hat mehrere Vorteile, insbesondere bei Optionsfeldern,

.unchecked, .checked{display:none;}
  label input:not(:checked) ~ .unchecked{display:inline;}
  label input:checked ~ .checked{display:inline;}

<label>
  <input type="checkbox" value="something" name="my_checkbox"/>
  <span class="unchecked">Not Checked</span>
  <span class="checked">Is Checked</span>
</label>

Wie Sie in der Demo sehen können, ist es möglich, das Eingabefeld zuerst zu verschachteln, gefolgt von anderen Elementen,

• Der Text, der angeklickt werden muss, um das Feld zu aktivieren
• Die Elemente, die auf das Eingabefeld folgen, werden je nach Status des Feldes dynamisch gestylt.

Darüber hinaus erlaubt HTML std mehrere Etiketten mit einem Eingabefeld verknüpft werden, was jedoch Bildschirmleser verwirren wird. Eine Möglichkeit, dies zu umgehen, besteht darin, das Eingabefeld und andere Elemente in einem einzigen Beschriftungselement zu verschachteln.