Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

Les pseudo-classes :in-range et :out-of-range.

:in-range
:out-of-range

Résumé des caractéristiques du sélecteur :in-range

Description rapide
Pseudo-classe désignant les zones de saisie dont la valeur est dans la fourchette autorisée.
Statut
Standard
Module W3C
Sélecteurs
Références (W3C)
Statut du document:: WD (document de travail)

Description des pseudo-classes :in-range et :out-of-range.

La pseudo-classe :in-range cible les éléments (zones de saisie) dont la valeur est dans la plage autorisée. A l'inverse :out-of-range cible les éléments dont la valeur est en dehors de la plage autorisée.

La plage des valeurs autorisée est définie par les attributs min et max d'une balise input. Remarque. La vérification de la valeur se fait au moment de la validation du formulaire : les balises form et /form doivent donc être présentes. Un bouton submit est également conseillé pour faciliter la demande de validation.

L'exemple ci-dessous est le code HTML minimal pour obtenir le fonctionnement. A droite vous pouvez constater le fonctionnement de base (sans styles CSS) en tapant des valeurs hors plage et en cliquant sur le bouton OK.

<form method="post" action="" > <input type="number" min="18" max="65" /> <input type="submit" value="ok"/> </form>

La norme prévoit que les zones de saisies qui ne comportent ni d'attribut min ni d'attribut max ne soient ciblées ni par :in-range, ni par :out-of-range. Dans la pratique, certains navigateurs considèrent que leur valeur est toujours dans la plage autorisée (puisqu'il n'y a pas de limites définies), et les font cibler par :in-range.

De nombreux types de zones de saisie comportent les attributs min et max, mais l'utilisateur n'a pas la possibilité de saisir une valeur hors de ces limites. C'est le cas des sliders (input type="range" /), des zones de saisie de date, etc. Pour ces éléments, c'est toujours le sélecteur :in-range qui est activé en permanence.

Exemples d'utilisation de :in-range et :out-of-range.

Vous constaterez, avec l'exemple ci-dessous, que les pseudo-classes :in-range et :out-of-range s'activent sans qu'il soit nécessaire de valider le formulaire, par exemple en cliquant sur le bouton de validation.

D'autre part, l'absence de saisie est considérée comme correcte, et active :in-range.
(Pour rendre une saisie obligatoire, voir l'attribut required et la pseudo-classe correspondante : :required).

Pour la zone de saisie du type date, mois et semaine, vous devrez saisir une date au clavier : les listes déroulantes ne vous permettront pas de saisir une valeur en dehors de la plage autorisée.

Prise en charge de :in-range et :out-of-range.

Les pseudo-classes :in-range et :out-of-range ne posent pas de problème de compatibilité avec les navigateurs actuels.

1
:in-range
:out-of-range
Estimation de la prise en charge en pourcentage du parc actuel.
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi...

Les pseudo-classes relatives à l'état des zones de saisie sont listées ci-dessous. Vous pouvez vous reporter à leur description pour plus de détails.

  • :autofill : Pseudo-classe désignant les éléments de saisie dont le contenu a été renseigné automatiquement par le navigateur.
  • :blank : Pseudo classe désignant les zones de saisie vides.
  • :checked : Pseudo-classe désignant les cases à cocher (ou boutons radio) qui sont cochés, ainsi que les éléments de menu sélectionnés.
  • :default : Pseudo-classe désignant les cases à cocher et boutons radio qui sont cochés par défaut.
  • :disabled : Pseudo-classe désignant les zones de saisie veerrouillées.
  • :enabled : Pseudo-classe désignant les zones de saisies non verrouillées.
  • :indeterminate : Pseudo classe désignant les zones de saisie dont la valeur est indéterminée.
  • :in-range : Pseudo-classe désignant les zones de saisie dont la valeur est dans la fourchette autorisée.
  • :invalid : Pseudo classe désignant les zones de saisie contenant une information invalide.
  • :optional : Pseudo élément désignant les zones de saisie non obligatoires.
  • :out-of-range : Pseudo-classe désignant les zones de saisie dont la valeur est en dehors de la plage autorisée.
  • :placeholder-shown : Pseudo-classe désignant les zones de saisie comportant un texte d'aide.
  • :read-only : Pseudo-classe désignant les zones de saisie en lecture seule.
  • :read-write : Pseudo-classe désignant les zones de saisie en lecture écriture.
  • :required : Pseudo-classe désignant les zones de saisie obligatoires.
  • :user-invalid : Pseudo-classe désignant les zones de saisie dont la valeur est invalide.
  • :user-valid : Pseudo-classe désignant les zones de saisie dont la valeur est valide.
  • :valid : Pseudo-classe désignant les zones de saisie contenant une information valide.