Input HTML type=number : min, max, step, validation | We.Inc
Testez input type=number en direct : définissez min, max et step, lisez valueAsNumber et chaque indicateur de validité, supprimez les flèches, et découvrez quand inputmode=numeric est le meilleur choix.
Utilisez input type="number" pour de vraies quantités comme un âge, un prix ou un nombre d'articles. min et max définissent la plage autorisée, step définit l'incrément (1 par défaut, ou any pour des décimales libres), et valueAsNumber vous donne un nombre, ou NaN quand le champ est vide. Pour les numéros de carte et les codes postaux, utilisez plutôt type="text" avec inputmode="numeric".
Attributs d'un champ numérique
Attribut
Exemple
Effet
min="0"
Les valeurs inférieures échouent à la validation (rangeUnderflow)
max="10"
Les valeurs supérieures échouent à la validation (rangeOverflow)
step="0.01" ou step="any"
1 par défaut, les valeurs hors du pas échouent (stepMismatch)
Un champ vide échoue (valueMissing)
list="sizes"
Suggère des valeurs depuis une datalist
placeholder="ex. 2"
Indication affichée tant que le champ est vide, jamais un libellé
Les champs numériques semblent simples, mais les règles sur les pas, les valeurs vides et les flèches piègent beaucoup de monde. Définissez les attributs dans le testeur, tapez n'importe quoi dans le champ, et voyez la valeur brute, le nombre interprété et chaque indicateur de validité se mettre à jour pendant la saisie.
Saisissez les valeurs min, max et step. Laissez une case vide pour retirer cet attribut.
Tapez dans le champ de test ou utilisez les touches fléchées et les boutons d'incrément.
Lisez value, valueAsNumber et les indicateurs de validité dans le panneau à côté.
Copiez le HTML généré une fois que le champ se comporte comme vous le souhaitez.
Associez toujours le champ à un élément label visible : un placeholder disparaît dès que l'on commence à taper.
Lisez valueAsNumber au lieu d'analyser value vous-même, et vérifiez NaN avant de l'utiliser.
Validez à nouveau côté serveur. Les vérifications du navigateur aident les utilisateurs, mais n'importe qui peut soumettre un formulaire sans elles.
Pour de l'argent, step="0.01" accepte les centimes, pour des décimales libres utilisez step="any".
N'utilisez pas type="number" pour les numéros de téléphone, de carte ou les codes postaux, où des flèches d'incrément n'ont aucun sens.
Questions fréquentes
Pourquoi mon input number refuse-t-il 1.5 ?
Le pas par défaut est 1, donc seuls les nombres entiers sont valides, sauf si la base du pas n'est pas un entier. Ajoutez step="0.5", step="0.01" ou step="any" pour accepter les décimales.
Que renvoie valueAsNumber pour un champ vide ?
NaN. Dans le même cas, la propriété value renvoie une chaîne vide. Vous pouvez aussi définir valueAsNumber pour écrire un nombre dans le champ.
Comment supprimer les flèches d'un input number ?
Appliquez appearance: textfield à l'input. Les touches fléchées haut et bas modifient toujours la valeur, car appearance ne change que l'apparence. WebKit et Blink dessinent aussi les boutons d'incrément via des pseudo-éléments, que l'exemple ci-dessous masque également.
Dois-je utiliser type=number ou inputmode=numeric ?
Utilisez type="number" quand la valeur est une vraie quantité et que les flèches d'incrément sont utiles. Utilisez type="text" avec inputmode="numeric" et un pattern pour les suites de chiffres comme les numéros de carte ou les codes postaux, qui sont des identifiants plutôt que des montants.
Un champ numérique vide est-il valide ?
Oui, sauf s'il a l'attribut required. Un input number est considéré comme valide quand il est vide ou contient un seul nombre valide.
Comment fonctionne la validation
Le navigateur vérifie le champ par rapport à min, max et step, et active un indicateur sur l'objet validity pour chaque règle enfreinte. Le formulaire ne sera pas soumis tant qu'un indicateur est actif, et :invalid vous permet de styliser le champ.
Quand le champ contient un texte que le navigateur ne peut pas convertir en nombre, validity.badInput passe à true. Vérifiez cet indicateur, ou NaN sur valueAsNumber, avant de vous fier à ce que vous lisez : le testeur montre exactement ce que rapporte votre navigateur.
Accessibilité et mobile
Un input number est exposé aux technologies d'assistance comme un spinbutton. Si l'incrémentation n'a pas d'utilité pour la valeur, un champ texte avec inputmode="numeric" évite les modifications accidentelles via la molette ou les touches fléchées.
Demandez-vous si la valeur est un montant auquel on pourrait ajouter ou retrancher quelque chose. Si oui, utilisez un champ numérique, si c'est un code qui se trouve contenir des chiffres, utilisez un champ texte.
Quel champ pour quel nombre
type=number comparé à un champ texte numérique
Donnée
Champ
Pourquoi
Quantité, âge, nombre d'invités
type="number" min max
Un vrai montant, les flèches et les contrôles de plage sont utiles
Champ de prix avec un pas décimal et un style d'erreur
Tapez 4.999 ou un nombre négatif et le contour devient rouge, car la valeur ne respecte pas le pas ou le minimum.
Masquer les boutons d'incrément
appearance: textfield supprime les flèches, les pseudo-éléments WebKit couvrent les navigateurs qui les dessinent encore. Les touches fléchées continuent de fonctionner.
Champ uniquement numérique sans flèches
inputmode suggère un clavier numérique, le pattern vérifie la présence de cinq chiffres, et les zéros initiaux sont conservés.
Lire le nombre en toute sécurité en JavaScript
valueAsNumber évite d'analyser une chaîne, et la vérification de validité détecte les valeurs hors plage ou hors pas.