12
votes

HTML - Correction correcte de coder une case à cocher avec une étiquette

J'utilise formastic afin de générer des formulaires HTML sur les applications Rails. Ma question, cependant, est vraiment liée à HTML.

Aujourd'hui, j'ai trouvé un comportement étrange sur le chemin Formtastic génère des cases à cocher (champs de type : booléen code> sur le lingo formastic). P>

Le reste des champs (non-cases à cocher) sont générés de cette manière: p>

<li>
  <label for="my_boolean_field">
    <input id="my_boolean_field" type="checkbox" ... >
    This is my boolean field
  </label>
</li>


0 commentaires

3 Réponses :


7
votes

Quelqu'un peut-il me dire pourquoi entourer des cases à cocher à l'intérieur de leur

Il pourrait être une bonne idée parce que vous pouvez perdre le id et et pour des attributs dans ce cas, ce qui simplifie le balisage. Lorsqu'un est à l'intérieur d'un <étiquette> , la connexion entre elles est implicite. (Voir HTML4 Section 17.9.1.)

Cependant, dans la pratique cela ne fonctionne pas dans IE, vous perdez donc cet avantage potentiel.

Je ne peux que supposer dans ce cas que c'est pour des raisons de mise en page / coiffage.


4 commentaires

Merci de répondre. La réponse de Justin n'était qu'un peu mieux. Mais +1 de toute façon.


À partir de la version, c'est-à-dire 7, c'est-à-dire qu'elle prend en charge l'association implicite, créée en plaçant un élément d'entrée à l'intérieur d'un élément d'étiquette. Bien sûr, la méthode d'identification est encore un peu plus fiable.


Cela fonctionne dans IE. 7+ en fait. Cela ne fonctionne pas avec des mises en page déposées.


Cette réponse est référencée dans cette question connexe: Stackoverflow.com/Questtions/8537621/...



11
votes

L'UI commun pour une entrée de texte est une étiquette à gauche: xxx

ou l'étiquette au-dessus de l'entrée: xxx

Pour une case à cocher cependant, l'interface utilisateur commune est que l'étiquette apparaît après l'entrée, comme celle-ci: xxx

pour les deux premiers cas, Il simplifie radicalement le CSS que vous devez créer si l'étiquette vient avant l'entrée dans le balisage. On pourrait affirmer que l'étiquette pourrait envelopper autour de l'entrée, mais la chose importante ici est que le texte passe avant l'entrée.

dans le troisième exemple (la case à cocher), le texte vient après l'étiquette, Et encore une fois, le CSS est grandement simplifié en plaçant l'étiquette au bon endroit dans l'ordre de balisage (après l'entrée).

Donc, les cases à cocher allaient toujours être différentes au reste des entrées. En ce qui concerne l'emballage de la case à cocher avec une étiquette, il s'agissait simplement d'une préférence personnelle, bien que je dirais que, puisque les entrées de la boîte à cocher sont différentes différentes, que l'entrée à l'intérieur de l'étiquette facilite la cible. Ces entrées de coiffage avec CSS, car le balisage est différent.


3 commentaires

Hey, j'ai une réponse du gars formastique! Cela a plus de sens maintenant, merci. Il suffit de vous demander, existe-t-il une option formastique pour contrôler ce comportement (c'est-à-dire mettre l'entrée après l'étiquette, au lieu de juste à l'intérieur)?


Non. L'ironie est que, au cours des dernières 24 heures, on m'a demandé cette même demande (préférence de déplacer la case à cocher de l'étiquette) et également pour que toutes les entrées soient déplacées à l'intérieur des étiquettes. Fondamentalement, il s'agit de tout simplement de style de code et de préférence personnelle, et je ne veux vraiment pas ajouter ce genre de complexité au code à ce moment-là. Le plan à long terme (j'espère) est que vous serez capable de personnaliser le balisage pour tout au long d'un moteur de rendu ou de partiels ou de quelque chose.


D'accord! Merci encore pour répondre. Je vais continuer à surveiller votre projet génial (que j'utilise déjà dans la production - très cool!)



4
votes

En plus des raisons mentionnées dans les autres réponses, si le <étiquette> est distinct que les espaces entre eux seront non cliqués. Ce n'est probablement pas ce que vous vouliez. Par exemple, la nouvelle ligne de ce code aboutira à un espace non cliquable: xxx

imbrication de l'entrée à l'intérieur du

Exemple en direct: http: //jsfiddle.net/xklrs/2/


0 commentaires