Question Deux champs de saisie dans une étiquette


Considérer ce qui suit:

<label>Range from 
    <input name='min_value'/> to
    <input name='max_value' />
</label>

Est-ce que c'est sémantiquement correct puisque les recommandations du W3C indiquent qu'une étiquette est associée à exactement un contrôle de forme?

En cliquant sur la seconde entrée, le focus se déplace immédiatement sur la première entrée? Est-ce que cela peut être empêché?

Comment marquer une combinaison de saisie min / max pour montrer que deux entrées sont associées?


25
2018-01-25 14:28


origine


Réponses:


Non, ce n'est pas correct (puisque, comme vous le remarquez, un label est associé à exactement un entrée de formulaire).

Pour étiqueter un groupe d'entrées qui appartiennent ensemble, utilisez un <fieldset> et un <legend>:

<fieldset>
  <legend>Range</legend>
  <label for="min">Min</label>
  <input id="min" name="min" />

  <label for="max">Max</label>
  <input id="max" name="max" />
</fieldset>

Les références:


39
2018-01-25 14:31



Comme l'indique la réponse acceptée, ce n'est pas correct, mais je pense qu'il existe de meilleures façons de le faire.

Alternatives accessibles:

Option 1 (en utilisant le aria-label attribut):

Range:
<input ... aria-label='Range start' />
<input ... aria-label='Range end' />

Option 2 (en utilisant caché label Mots clés):

<label for='start'>Range start</label>
<input type='text' id='start' />

<label for='end' class='hidden'>Range end</label>
<input type='text' id='end' />

Où le .hidden la classe est lisible uniquement par les lecteurs d'écran.

Option 3 (en utilisant aria-labelledby les attributs):

<label id='lblRange'>Range</label>
<input type='text' id='start' aria-labelledby='lblRange' />
<input type='text' id='end' aria-labelledby='lblRange' />

Avantages de l'option n ° 1: chaque input a une bonne description que d'autres suggestions (telles que l'ajout d'une étiquette "à") ne le font pas. Les options # 2 et # 3 ne sont peut-être pas les meilleures pour ce cas particulier, mais il convient de le mentionner pour des cas similaires.

La source: http://webaim.org/techniques/forms/advanced


13
2017-07-07 16:44



Que dis-tu de ça:

<label> Range from <input name='min_value'> </label>
<label> to <input name='max_value'> </label>

3
2018-01-25 14:35



Selon ce - l'étiquette ne peut contenir qu'une seule entrée car elle devrait être associée à seulement un contrôle. Mettre des données à l’intérieur de l’étiquette signifie éliminer for attribut (liaison automatique).

Donc vous devriez soit mettre unique entrer dans l'étiquette ou spécifier for attribut qui pointe vers l'entrée id et ne pas mettre l'entrée dans l'étiquette.


3
2018-01-25 14:37



Je vois beaucoup de réponses disant que c'est mal de mettre 2 entrées dans une étiquette. C'est en fait une fausse déclaration en html5. La norme l'autorise explicitement: http://www.w3.org/TR/html5/forms.html#the-label-element

Si l'attribut for n'est pas spécifié, mais que l'élément label a un élément descendant étiquetable, alors le premier un tel descendant dans un arbre est le contrôle étiqueté de l'élément label.

Si un élément d'étiquette a un contenu interactif autre que son contrôle marqué, le comportement d'activation de l'élément d'étiquette pour des événements ciblés à ces descendants de contenu interactif et les descendants de ceux-ci doivent être de ne rien faire.

Cependant, Safari ne respecte pas la norme html5 (testée sur iOS 11.3). Donc, quelqu'un qui veut être compatible avec Safari doit utiliser des solutions de contournement ici ou attendre jusqu'à ce qu'Apple fixe son navigateur.


2
2018-04-16 14:16



1 ÉTIQUETTE = 1 ENTRÉE !!!

Si vous mettez 2 ENTREES dans une étiquette, il ne fonctionnera pas dans Safari (et iPad et iPhone) ... parce que quand vous cliquez dans l'étiquette il se concentre automatiquement la première entrée ... de sorte que la seconde entrée est impossible de taper à.


1
2017-11-21 15:51



Je ne pense pas que vous devriez mettre le champ de saisie dans le contrôle des étiquettes.

<label for="myfield">test</label><input type="text" id="myfield" name="myfield />

l'étiquette est juste ça, une étiquette pour quelque chose.


-3
2018-01-25 14:32