web-dev-qa-db-fra.com

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 sémantiquement correct puisque les recommandations du W3C indiquent qu'une étiquette est associée à exactement un contrôle de formulaire?

En cliquant sur la deuxième entrée, on se concentre immédiatement sur la première entrée? Cela peut-il être empêché?

Comment pourrait-on baliser une combinaison d'entrées min/max pour montrer que deux entrées vont ensemble?

htmlaccessibility
29
sqwk

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

Pour étiqueter un groupe d'entrées qui vont 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>

Références:

44
David Thomas

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

Alternatives accessibles:

Option 1 (en utilisant l'attribut aria-label):

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

Option 2 (en utilisant les balises label cachées): 

<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ù la classe .hidden est uniquement lisible par les lecteurs d'écran .

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

<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'un libellé "à") n'en ont pas. Les options 2 et 3 ne sont peut-être pas les meilleures pour ce cas particulier, mais méritent d'être mentionnées dans des cas similaires.

Source: http://webaim.org/techniques/forms/advanced

13
Diego Jancic

Je vois beaucoup de réponses dire qu'il est faux de mettre 2 entrées à l'intérieur d'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 descendant d’élément labelable, le first tel descendant dans l’ordre de l’arborescence 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 étiqueté, le comportement d'activation de l'élément d'étiquette pour les événements ciblés sur ces descendants de contenu interactif et tous leurs descendants doivent ne rien faire.

Cependant, Safari ne respecte pas le standard html5 (testé sur iOS 11.3). Ainsi, quelqu'un qui veut être compatible avec Safari doit utiliser des solutions de contournement ou attendre que Apple corrige son navigateur.

4
user1448926

Que dis-tu de ça:

<label> Range from <input name='min_value'> </label>
<label> to <input name='max_value'> </label>
3
Šime Vidas

Selon cette étiquette - ne peut contenir qu'une seule entrée car elle devrait être associée à un seul contrôle. Mettre une entrée à l'intérieur de l'étiquette signifie l'élimination de l'attribut for (liaison automatique). 

Vous devez donc soit mettre single input dans label ou spécifier l'attribut for qui pointe vers input id et don't met input dans label.

3
zysoft

1 ETIQUETTE = 1 ENTREE !!!

Si vous mettez 2 INPUTS dans une LABEL, cela ne fonctionnera PAS dans Safari (et sur iPad et iPhone) ... car lorsque vous cliquez dans LABEL, la première entrée est automatiquement focalisée ..., de sorte que la seconde entrée est impossible à saisir.

1
Martin Zvarík