Nombre HTML : min, max, step, décimales et valueAsNumber
HTML input type="number" accepte les quantités qui peuvent être comparées ou incrémentées. min et max définissent la plage, et step définit les intervalles valides. Autoriser les décimales nécessite de considérer à la fois l'intervalle et sa base ; les numéros de téléphone ou codes postaux à apparence numérique nécessitent généralement un autre type de saisie.
min · max · step
min et max n'empêchent pas nécessairement la saisie de nombres hors limites. Même si une valeur non valide peut être saisie, l'envoi normal du formulaire est bloqué par la validation. Ajoutez required si la valeur ne doit pas être vide.
La base de l'étape est une valeur valide de min si elle est présente, sinon un attribut value HTML valide, ou zéro si aucune des deux n'existe. Les valeurs valides sont un nombre entier d'étapes à partir de cette base. L'intervalle par défaut est 1, mais une base décimale peut produire des valeurs décimales valides, donc la valeur par défaut n'interdit pas universellement les décimales.
| Configuration | Exemples de valeurs valides | Prudence |
|---|---|---|
min="0" step="1" |
0, 1, 2 |
0.5 ne correspond pas à l'intervalle. |
min="0" step="0.01" |
1, 1.2, 1.23 |
1.234 ne correspond pas. Cela n'oblige pas un affichage sur deux décimales. |
min="0" step="3" |
0, 3, 6, 9 |
Multiples de trois à partir d'une base zéro. |
min="1" step="3" |
1, 4, 7, 10 |
La base est un, donc ceux-ci diffèrent des multiples de trois. |
step="any" |
Différentes valeurs décimales dans la plage | Supprime la contrainte de pas ; les autres contraintes de plage et de nécessité restent. |
Comparer l'entrée entière et l'entrée décimale dans un exemple
Enregistrez ce code complet sous le nom number.html et ouvrez-le dans un navigateur. Sans serveur, comparez la validation, les chaînes soumises et les valeurs numériques JavaScript pour la quantité et le poids. Cet exercice définit le poids de 0 à 100 kg par incréments de 0,01 kg.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Plages numériques et pas</title>
<style>
body { margin: 24px; font-family: sans-serif; }
label { display: block; margin: 16px 0 6px; }
input { width: 12rem; max-width: 100%; box-sizing: border-box; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
</style>
</head>
<body>
<h1>Saisir la quantité et le poids</h1>
<form id="demo">
<label for="quantity">Quantité (1 à 10, unités entières)</label>
<input id="quantity" name="quantity" type="number"
min="1" max="10" step="1" value="2" required>
<label for="weight">Poids (0 à 100 kg, pas de 0,01 kg)</label>
<input id="weight" name="weight" type="number"
min="0" max="100" step="0.01" value="1.25" required>
<p><button type="submit">Afficher les valeurs</button>
<button type="reset">Réinitialiser</button></p>
</form>
<pre id="result" aria-live="polite"></pre>
<script>
const form = document.querySelector('#demo');
const quantity = document.querySelector('#quantity');
const weight = document.querySelector('#weight');
const result = document.querySelector('#result');
form.addEventListener('submit', (event) => {
event.preventDefault();
result.textContent = JSON.stringify({
formData: [...new FormData(form).entries()],
numbers: { quantity: quantity.valueAsNumber, weight: weight.valueAsNumber }
}, null, 2);
});
form.addEventListener('input', () => { result.textContent = ''; });
form.addEventListener('reset', () => { result.textContent = ''; });
</script>
</body>
</html>- Soumettez les valeurs initiales.
formData(chaînes):"2","1.25";numbers(nombres):2,1.25. - Définissez la quantité à 11 et soumettez pour déclencher la validation maximale. Réglez-la à 2,5 pour la validation de l’incrément, ou laissez-la vide pour la validation obligatoire. Restaurez la quantité à 2.
- Un poids de 1,23 est soumis, mais 1,234 ne correspond pas à l’intervalle. Le formatage des décimales fixe diffère des intervalles numériques valides.
- Changez uniquement le
step="1"de la quantité enstep="3"et rouvrez le fichier. Parce quemin="1", la valeur initiale 2 est invalide mais 4 est valide. Rétablissez l'étape à 1 ensuite. - La réinitialisation remet la quantité à 2 et le poids à 1,25 et efface le résultat.
Distinguer les identifiants ressemblant à des nombres
Les numéros de téléphone, les codes postaux et les identifiants de membre doivent souvent conserver leur chaîne originale plutôt que d'être traités comme des nombres. Les zéros initiaux ou les traits d'union peuvent être importants. Pensez à type="tel" pour les téléphones et type="text" inputmode="numeric" pour les identifiants ressemblant à des nombres. inputmode indique un clavier ; ce n'est pas une règle de validation numérique.
Les champs numériques ne doivent pas utiliser maxlength ou pattern pour limiter le nombre de chiffres ou les motifs d'expression régulière. Définissez la largeur avec CSS plutôt qu'avec size. Les navigateurs diffèrent dans le comportement de saisie des caractères, les flèches d'incrément et l'affichage du séparateur décimal, donc ne vous fiez pas à une seule apparence ou à un comportement de blocage.
Gérez les nombres en JavaScript et sur le serveur
input.value et les valeurs ordinaires soumises via un formulaire sont des chaînes. Utilisez valueAsNumber pour un nombre ; il renvoie NaN lorsqu'il est vide ou non convertible. Convertir une chaîne vide avec Number() produit zéro, donc distinguez d'abord une valeur vide si celle-ci signifie quelque chose de différent de zéro.
La validation par le navigateur seule ne rend pas une valeur fiable. Validez également le format numérique, la finitude, l'intervalle et le pas côté serveur. Pour les calculs nécessitant une précision décimale, tels que les montants, tenez compte de l'erreur de flottement binaire de JavaScript et utilisez des entiers dans l'unité monétaire la plus petite ou une approche décimale appropriée.
La référence MDN sur la saisie de nombre explique les attributs et les règles de base des pas.
