Question Devrais-je mettre des étiquettes d'entrée dans une étiquette?


Je me demandais si il y a une meilleure pratique concernant l'étiquette et l'étiquette d'entrée:

manière classique:

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

ou

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

476
2018-04-21 18:52


origine


Réponses:


De w3: L'étiquette elle-même peut être positionnée avant, après ou autour du contrôle associé.

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

ou

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

ou

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

Notez que la troisième technique ne peut pas être utilisée lorsqu'une table est utilisée 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 valide. J'aime utiliser le premier ou le deuxième exemple, car cela vous donne plus de contrôle de style.


434
2018-04-21 18:54



je préfère

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

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

plus de

<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 à styler 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 a toujours l'air meilleur à mon avis.


48
2017-09-11 15:03



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 l'étiquette d'entrée dans mes étiquettes car je pense qu'elles sont séparées, ne contenant pas d'entités.


33
2018-04-21 18:56



Différence de comportement: en cliquant dans l'espace entre l'étiquette et l'entrée

Si vous cliquez sur l'espace entre l'étiquette et l'entrée activent l'entrée uniquement si l'étiquette contient l'entrée.

Cela a du sens puisque, dans ce cas, l'espace est simplement un autre caractère de l'étiquette.

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

Pouvoir cliquer entre une étiquette et une case signifie que c'est:

  • plus facile à cliquer
  • moins clair où les choses commencent et finissent

Les exemples de checkstrap v3.3 de Bootstrap utilisent l’entrée à l’intérieur: http://getbootstrap.com/css/#forms Peut-être sage de les suivre. Mais ils ont changé d'avis dans v4.0 https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios donc je ne sais plus ce qui est sage:

Les cases à cocher et les radios utilisées sont conçues pour prendre en charge la validation de formulaire HTML et fournir des étiquettes concises et accessibles. En tant que tel, notre <input>le sable <label>s sont des éléments frères, par opposition à un <input> dans un <label>. Ceci est légèrement plus détaillé car vous devez spécifier id et pour que les attributs relient le <input> et <label>.

UX question qui traite de ce point en détail: https://ux.stackexchange.com/questions/23552/should-the-space-between-the-checkbox-and-label-be-clickable


27
2017-07-06 14:02



Personnellement, j'aime garder l'étiquette à l'extérieur, comme dans votre deuxième exemple. C'est pourquoi l'attribut FOR est là. La raison en est que j'appliquerai souvent des styles à l'étiquette, comme une largeur, pour que le formulaire soit beau (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 fait que je peux éviter les tableaux et tout ce bazar dans mes formulaires.


15
2018-04-21 18:59



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

Ils disent que cela peut se faire de toute façon. Ils décrivent les deux méthodes comme explicites (en utilisant "pour" avec l'identifiant de l'élément) et implicites (en incorporant l'élément dans l'étiquette):

Explicite:

L'attribut for associe explicitement une étiquette à un autre contrôle: la valeur de l'attribut for doit être identique à 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'étiquette peut contenir seulement un élément de contrôle.


14
2017-10-08 20:22



Les deux sont corrects, mais mettre l'entrée à l'intérieur de l'étiquette la rend beaucoup moins flexible lors du coiffage avec CSS.

Premier, une <label> est restreint dans quels éléments il peut contenir. Par exemple, vous ne pouvez mettre qu'un <div> entre le <input> et le texte de l'étiquette, si le <input> n'est pas à l'intérieur du <label>.

Deuxièmement, bien qu'il existe des solutions pour rendre le style plus facile, comme pour enrouler le texte de l'étiquette interne avec une étendue, certains styles seront hérités des éléments parents, ce qui peut compliquer le style.


9
2018-04-21 18:59