Dois-je placer les éléments d'entrée à l'intérieur d'un élément d'étiquette ?

Question

Existe-t-il une meilleure pratique concernant l'imbrication des éléments suivants label y input Les éléments HTML ?

de manière classique :

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

o

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

Answer 1

De w3 :

L'étiquette peut être placée avant, après ou autour du contrôle associé. contrôle associé.

---

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

o

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

o

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

Notez que la troisième technique ne peut pas être utilisée lorsqu'un tableau est utilisé pour la mise en page, avec l'étiquette dans une cellule et son champ de formulaire associé dans une autre cellule.

L'un ou l'autre est valable. J'aime utiliser le premier ou le deuxième exemple, car il vous permet de mieux contrôler le style.

Answer 2

Je préfère

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

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

sur

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

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

Principalement parce que cela rend le HTML plus lisible. Et je pense en fait que mon premier exemple est plus facile à styliser avec CSS, car CSS fonctionne très bien avec les éléments imbriqués.

Mais c'est une question de goût, je suppose.

---

Si vous avez besoin de plus d'options de style, ajoutez une balise span.

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

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

Le code est toujours mieux à mon avis.

Answer 3

Si vous incluez la balise input dans la balise label, vous n'avez pas besoin d'utiliser l'attribut 'for'.

Cela dit, je n'aime pas inclure la balise input dans mes étiquettes, car je pense qu'il s'agit d'entités distinctes, et non d'une seule entité.

Answer 4

Personnellement, j'aime garder l'étiquette à l'extérieur, comme dans votre deuxième exemple. C'est pourquoi l'attribut FOR est présent. La raison en est que j'applique souvent des styles à l'étiquette, comme une largeur, pour que le formulaire ait l'air agréable (raccourci ci-dessous) :

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

Cela me permet d'éviter les tableaux et toutes ces saletés dans mes formulaires.

Answer 5

Voir http://www.w3.org/TR/html401/interact/forms.html#h-17.9 pour les recommandations du W3.

Ils disent que cela peut être fait de l'une ou l'autre façon. Ils décrivent les deux méthodes comme explicites (utilisation de "for" avec l'identifiant de l'élément) et implicites (intégration de l'élément dans l'étiquette) :

Explicite :

L'attribut for associe une étiquette à un autre contrôle de manière explicite : la valeur de l'attribut for doit être la même que la valeur de l'attribut id de l'élément de contrôle associé.

Implicite :

Pour associer implicitement une étiquette à un autre contrôle, l'élément de contrôle doit se trouver dans le contenu de l'élément LABEL. Dans ce cas, l'élément LABEL ne peut contenir qu'un seul élément de contrôle.