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

Aus den W3's HTML4-Spezifikation :

Das Etikett selbst kann vor, nach oder um das zugehörigen 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 gerne entweder das erste oder das zweite Beispiel, da man so mehr Kontrolle über den Stil hat.

Answer 2

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" />

Vor allem, weil es das HTML besser lesbar macht. Und ich denke, dass mein erstes Beispiel mit CSS einfacher zu gestalten ist, da CSS sehr gut mit verschachtelten Elementen funktioniert.

Aber ich denke, das ist Geschmackssache.

---

Wenn Sie mehr Gestaltungsmöglichkeiten 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>

Der Code sieht meiner Meinung nach immer noch besser aus.

Answer 3

Unterschiedliches Verhalten: Klicken in den Bereich zwischen Beschriftung und Eingabe

Wenn Sie auf das Leerzeichen klicken zwischen das Etikett und den Eingang, so wird der Eingang nur aktiviert, wenn das Etikett den Eingang enthält.

Dies ist sinnvoll, da in diesem Fall das Leerzeichen nur ein weiteres Zeichen der Bezeichnung ist.

div {
  border: 1px solid black;
}
label {
  border: 1px solid black;
  padding: 5px;
}
input {
  margin-right: 30px;
}

<p>Inside:</p>
<label>
  <input type="checkbox" />
  Label. Click between me and the checkbox.
</label>

<p>Outside:</p>
<input type="checkbox" id="check" />
<label for="check">Label. Click between me and the checkbox.</label>

Die Möglichkeit, zwischen Etikett und Kasten zu klicken, bedeutet, dass dies der Fall ist:

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

Bootstrap Checkbox v3.3 Beispiele verwenden die Eingabe innerhalb: http://getbootstrap.com/css/#forms Es könnte ratsam sein, ihnen zu folgen. Aber sie änderten ihre Meinung in v4.0 https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios Ich weiß also nicht mehr, was klug ist:

Kontrollkästchen und Radios unterstützen die HTML-basierte Formularvalidierung und bieten prägnante, verständliche Beschriftungen. Als solche sind unsere <input> s und <label> s sind geschwisterliche Elemente im Gegensatz zu einem <input> innerhalb einer <label> . Dies ist etwas ausführlicher, da Sie die Attribute id und for angeben müssen, um die <input> y <label> .

UX-Frage, in der dieser Punkt ausführlich behandelt wird: https://ux.stackexchange.com/questions/23552/should-the-space-between-the-checkbox-and-label-be-clickable

Answer 4

Wenn Sie das Eingabe-Tag in das Label-Tag einschließen, brauchen Sie das Attribut "for" nicht zu verwenden.

Abgesehen davon mag ich es nicht, das Eingabe-Tag in meine Beschriftungen einzubinden, weil ich denke, dass sie separate, nicht enthaltende Einheiten sind.

Answer 5

Ich persönlich mag es, wenn das Etikett außen bleibt, wie in Ihrem zweiten Beispiel. Deshalb gibt es auch das FOR-Attribut. Der Grund dafür ist, dass ich oft Stile auf die Beschriftung anwende, wie z. B. eine Breite, um das Formular schön aussehen zu lassen (siehe untenstehende Kurzform):

<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" />

Dadurch kann ich Tabellen und all den anderen Kram in meinen Formularen vermeiden.