& lt; label & gt; sur les cases à cocher: existe-t-il une raison pour laquelle d'autres sites Web ne l'utilisent pas?

J'essaie toujours de faire ce qui suit:

<label><input type="checkbox" /> Some text</label>

ou

<label for="idOfField"><input type="checkbox" id="idOfField" /> Some text</label>

Ma question est liée à la balise d'étiquette, plus précisément sur une case à cocher.

La plupart des sites web (je dirais >40%) n'utilisez pas le <label> tag.

Est-il une raison pour cela? Est-il un problème dans un navigateur ou d'un autre problème?

Remarque: Cas où les gens ne connaissent pas la <label> balise, il a un certain nombre d'avantages:

  • cases & radios: vous pouvez cliquer sur le texte ainsi que la case à cocher la case à cocher (ainsi que de l'accent, je crois): bla bla Bla
  • autres entrées: si vous cliquez sur le texte, il sera axé sur les intrants (textarea, texte, fichier) (cette fonctionnalité n'est pas aussi utile que de cases & radios)

Note 2: Certaines personnes ont mentionné que l'exemple #2 est plus correct que #1 (ci-dessus), mais d'après la documentation icisoit est correct

source d'informationauteur Darryl Hein | 2008-12-30

  1. 13

    Je pense que c'est probablement plus d'un facteur que les gens ne savent pas à propos de la <label> tag. Je n'ai pas, jusqu'à ce post.

  2. 6

    Je suis d'accord que l'étiquette est souvent un inconnu de la balise.
    Je l'utilise sous la forme 

    <label for="chk1">Some text</label><input id="chk1" type="checkbox"/>

    L'attribut for de permettre à l'utilisateur de cliquer sur l'étiquette pour sélectionner la case à cocher correspondant à l'id (pas de nom) et de ne pas être annidate je peux mieux contrôler la mise en page avec les CSS.

    Je vais essayer votre solution, bien qu'

  3. 5

    Il n'y a pas d'inconvénient à l'utilisation de <label> que je connais. J'ai utilisé beaucoup dans les dernières années.

    Il y a en fait 3 façons dont vous pouvez définir une étiquette, les deux premiers correspondent à celles que vous avez donné à votre question:

    <label for="xa">XA: <input type="text" id="xa" /></label><br />
<label for="xb">XB:</label> <input type="text" id="xb" /><br />
<label>XC: <input type="text" id="xc" /></label>

    Tous les 3 de ces travaux dans FF3 et IE7. Je me souviens que pour une raison que je mentalement marqué les deux dernières comme "à éviter, ne fonctionnent que partiellement". Donc, je 'd parier de l'argent bien que seul le premier travaille dans IE6.

    À clarifier: la "meilleure" façon de faire est de mon exemple #1, votre exemple #2.

  4. 4

    Certains anciens navigateurs ne pas interpréter les pour attribut, et au lieu d'exiger de l'élément de formulaire imbriqué dans le étiquette tag.

  5. 3

    Le développeur qui travaille sur le site ne connaissais pas le <label> tag existé.

  6. 2

    La plupart des sites web ont été faites par des gens qui ne font que ce qu'il faut pour obtenir le site de travailler comme ils le pensent. Flux de processus est:

    1. Prendre un coup de couteau.
    2. De le charger dans le navigateur, et de voir quel est le problème.
    3. De recherche google pour les correctifs.
    4. Répéter.

    Puisque la plupart de ces gens ne jamais essayer de concentrer les entrées sans l'aide de la souris, le problème n'est jamais évident.

  7. 2

    Les avantages sont évidents, mais je ne pense pas que la plupart le savent parce que l'étiquette semble véhiculer rien de concret. Vous pouvez évidemment voir l'avantage de l'utilisation d'une balise strong, car il rend le texte en gras, mais cette étiquette? Vous ne l'auriez pas remarqué quelque chose de différent.

  8. 1

    Parce que c'est un underhyped balise qui devrait recevoir plus d'attention. Pendant que vous y êtes (amélioration de l'accessibilité), n'oubliez pas la propriété tabindex.