Les éléments<input> dont l'attributtype vautnumber permettent à une utilisatrice ou un utilisateur de saisir des nombres dans un formulaire. De tels contrôles incluent des mécanismes de validation natifs afin de rejeter les valeurs non-numériques.

Le navigateur peut agrémenter le contrôle avec des flèches afin d'incrémenter/décrémenter la valeur grâce à la souris ou avec le doigt.

Exemple interactif

<label for="tentacles">Number of tentacles (10-100):</label><input type="number" name="tentacles" min="10" max="100" />

label {  display: block;  font:    1rem "Fira Sans",    sans-serif;}input,label {  margin: 0.4rem 0;}

Valeur

Un nombre qui représente la valeur saisie dans le contrôle. Il est possible d'indiquer une valeur par défaut en utilisant l'attributvalue :

<input type="number" value="42" />

Attributs supplémentaires

En complément des attributs pris en charge par l'ensemble des éléments<input>, les champs de typenumber peuvent utiliser les attributs suivants.

list

La valeur de cet attribut est l'identifiant d'un élément<datalist> situé dans le même document.L'élément<datalist> fournit la liste de valeurs prédéfinies à suggérer à l'utilisatrice ou à l'utilisateur. Toute valeur de la liste qui n'est pas compatible avec ce type de champ n'est pas incluse dans les options suggérées. Les valeurs fournies sont des suggestions et pas des valeurs imposées : il reste possible de sélectionner des valeurs en dehors de cette liste.

max

La valeur maximale qui peut être acceptée pour ce champ. Si la valeur du champ (portée par l'attributvalue dépasse ce seuil, l'élémentne pourra être validé. Si la valeur de l'attributmax n'est pas un nombre, l'élément n'aura pas de maximum.

Cette valeur doit être supérieure ou égale à l'attributmin.

min

La valeur minimale qui peut être acceptée pour ce champ. Si la valeur du champ (portée par l'attributvalue est inférieure à ce seuil, l'élémentne pourra être validé. Si la valeur de l'attributmin n'est pas un nombre, l'élément n'aura pas de minimum.

Cette valeur doit être inférieure ou égale à l'attributmax.

placeholder

L'attributplaceholder est une chaîne de caractères fournissant une courte indication à l'utilisatrice ou l'utilisateur quant à l'information attendue dans le champ. Cet attribut devrait être un mot ou une phrase courte qui illustre le type de donnée attendu plutôt qu'un message explicatif. Le textene doit pas contenir de saut à la ligne.

Si le contenu du contrôle respecte une directionnalité donnée (LTR ouRTL) et que le texte indicatif doit être présenté dans l'autre sens, il est possible d'utiliser l'algorithme de formatage bidirectionnel Unicode — voirComment utiliser les contrôles Unicode pour le texte bidirectionnel (en anglais) pour plus de détails.

readonly

Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisatrice ou l'utilisateur. Toutefois, la valeur de l'attributvalue peut toujours être modifiée via du code JavaScript, qui définirait la propriétévalue rattachée àl'interfaceHTMLInputElement.

step

L'attributstep est un nombre qui définit la granularité de la valeur ou le mot-cléany. Seules les valeurs qui sont des multiples de cet attribut depuis le seuilmin sont valides.

Lorsque la chaîne de caractèresany est utilisée, cela indique qu'aucun incrément spécifique n'est défini et que toute valeur (comprise entremin etmax) est valide.

Pour les champs de typenumber, l'incrément par défaut est 1 et ne permet donc que de saisir des entiers si la valeur de base est entière. Ainsi, si on amin qui vaut -10 etvalue qui vaut 1.5, si on astep qui vaut 1, seules les valeurs 1.5, 2.5, 3.5,…, -0.5, -1.5, -2.5,… seront valides.

Utiliser les contrôles de saisie numérique

Les éléments<input type="number"> simplifient la saisie de valeurs numériques dans un formulaire. Lorsqu'on crée un tel contrôle, des mécanismes de validation automatiques sont appliqués afin de vérifier que le texte saisi est bien un nombre. Généralement un contrôle de saisie numérique inclura des boutons avec des curseurs pour augmenter/réduire la valeur.

De plus, les navigateurs mobiles peuvent adapter leur ergonomie en affichant un clavier adapté à la saisie de valeur numérique lorsque l'utilisatrice ou l'utilisateur appuie sur un tel contrôle.

Un contrôle simple

Dans sa forme la plus simple, on peut implémenter un contrôle de saisie numérique avec le fragment HTML suivant :

<label for="ticketNum">Nombre de tickets à acheter :</label><input type="number" name="ticketNum" value="0" />

Un contrôle de saisie numérique considère que la valeur est valide si elle est vide ou quand un nombre est saisi. Dans les autres cas, la valeur est considérée invalide. Si l'attributrequired est utilisé, la valeur vide n'est plus considérée valide.

Indicateurs de saisie —placeholders

Il est parfois utile de fournir une indication quant à la valeur qui devrait être saisie. C'est notamment le cas lorsque la disposition de la page ne permet pas d'avoir d'étiquettes suffisamment descriptives pour chaque<input>. Dans ces cas, on peut utiliser l'attributplaceholder afin de fournir une indication et qui sera le texte affiché dans le contrôle avant toute saisie ou quand la valeur est vide.

Dans l'exemple qui suit, on utilise un élément<input> de typenumber avec le texte indicatifMultiple de 10. Vous pouvez noter la façon dont le texte disparaît/réapparaît à selon la présence ou l'absence de valeur dans le champ.

<input type="number" placeholder="Multiple de 10" />

Paramétrer la taille de l'incrément

Par défaut, les curseurs fournis pour incrémenter/décrémenter la valeur utilisent un pas de 1. Ce comportement par défaut peut être changé en utilisant l'attributstep dont la valeur représente le pas d'incrémentation. Dans l'exemple qui suit et parce que le texte informatif indique "Multiple de 10", on utilise un pas de 10 grâce à l'attributstep :

<input type="number" placeholder="Multiple de 10" step="10" />

Dans cet exemple, on peut voir que les curseurs permettent d'augmenter ou de réduire la valeur de 10 (et non de 1). Il est toujours possible de saisir manuellement un nombre qui n'est pas un multiple de 10 mais la valeur sera alors considérée invalide.

Indiquer un minimum et un maximum

Les attributsmin etmax peuvent être employés afin d'indiquer les bornes de l'intervalle dans lequel doit se situer la valeur. Par exemple, avec le fragment HTML suivant, on indique que le minimum vaut 0 et que le maximum vaut 100 :

<input type="number" placeholder="Multiple de 10" step="10" min="0" max="100" />

Dans cet exemple, les curseurs ne permettent pas de dépasser 100 ou de saisir une valeur inférieure à 0. Il est toujours possible de saisir manuellement un nombre en dehors de ces bornes mais la valeur sera alors considérée invalide.

Autoriser les valeurs décimales

Par défaut, l'incrément d'un tel contrôle vaut 1 et si on saisit la valeur1.0, elle sera considérée invalide. Si on souhaite pouvoir saisir une valeur qui contient une partie décimale, on pourra utiliser l'attributstep (par exemple, on pourra utiliserstep="0.01" pour autoriser des nombres avec deux chiffres après la virgule) :

<input type="number" placeholder="1.0" step="0.01" min="0" max="10" />

Dans cet exemple, on peut saisir des valeurs comprises entre 0 et 10 et qui ont au plus deux chiffres après la virgule,9.52 sera considérée comme valide mais pas9.521.

Paramétrer la taille du contrôle

Les éléments<input> de typenumber ne prennent pas en charge l'attributsize et il est donc nécessaire d'utiliser CSS afin de modifier la taille des contrôles.

Par exemple, si on souhaite réduire la largeur du contrôle, car il ne permet que de saisir un nombre à trois chiffres, on ajoute un identifiant sur l'élément et on réduit le texte indicatif afin qu'il ne soit pas tronqué :

<input  type="number"  placeholder="x10"  step="10"  min="0"  max="100"  />

On ajoute ensuite une déclaration CSS dans la feuille de style pour l'élément avec un identifiantnumber :

#number {  width: 3em;}

Le résultat ressemblera à :

Ajouter des valeurs suggérées

Il est possible de fournir une liste d'options par défaut parmi lesquelles l'utilisatrice ou l'utilisateur pourra choisir. Pour cela, on renseignera l'attributlist dont la valeur est l'identifiant (attributid) d'un élément<datalist> contenant autant d'éléments<option> que de valeurs suggérées. La valeur de l'attributvalue de chaque élément<option> sera utilisée comme suggestion pour la saisie dans le contrôle.

<input type="number" name="ticketNum" list="defaultNumbers" /><span></span><datalist>  <option value="10045678"></option>  <option value="103421"></option>  <option value="11111111"></option>  <option value="12345678"></option>  <option value="12999922"></option></datalist>

Validation

Plusieurs mécanismes de validation sont mis en place par le navigateur pour les contrôles de saisie numérique :

• Toute valeur qui n'est pas un nombre est considérée comme invalide (la valeur vide est uniquement considérée comme valide si l'attributrequired est absent).
• L'attributrequired peut être utilisé afin qu'une valeur vide soit invalide (autrement dit, le champ devra être renseigné pour être correct).
• Toute valeur qui n'est pas un multiple destep est considérée comme invalide.
• Toute valeur qui est inférieure àmin ou supérieure àmax est considérée comme invalide.

L'exemple suivant illustre l'ensemble de ces fonctionnalités et quelques règles CSS ont été ajoutées afin d'afficher des icônes pour indiquer si la valeur saisie est valide ou invalide :

<form>  <div>    <label for="balloons">Quantité de ballons à commander (par 10) :</label>    <input           type="number"      name="balloons"      step="10"      min="0"      max="100"      required />    <span></span>  </div>  <div>    <input type="submit" />  </div></form>

Vous pouvez essayer d'envoyer des données invalides (pas de valeur, une valeur inférieure à 0 ou supérieure à 100 ou une valeur qui n'est pas un multiple de 10) afin de voir les messages d'erreur fournis par le navigateur.

Voici les règles CSS appliquées :

div {  margin-bottom: 10px;}input:invalid + span:after {  content: "✖";  padding-left: 5px;}input:valid + span:after {  content: "✓";  padding-left: 5px;}

Ici, on a utilisé les pseudo-classes:invalid et:valid afin d'afficher une icône selon le cas, à côté de l'élément<span> adjacent. On utilise un élément<span> séparé pour plus de flexibilité : certains navigateurs n'affichent pas le contenu généré par les pseudo-classes pour certains types de contrôle (cf.<input type="date">).

Utilisation d'un motif de validation

Les éléments<input type="number"> ne prennent pas en charge l'attributpattern qui permet de restreindre les valeurs selon une expression rationnelle.

En effet, les contrôles de saisie numérique sont destinés à contenir des nombres plutôt que des chaînes de caractères et les autres attributs permettent de paramétrer les valeurs recevables (cf. ci-avant).

Exemples

Dans l'exemple suivant, on crée un formulaire qui permet de saisir la taille d'un personne, par défaut exprimée en mètres et pour laquelle un bouton permet de la saisir en pieds et en pouces (feet /inches).

<form>  <div>    <label for="meters">Saisir votre taille — en mètres :</label>    <input           type="number"      name="meters"      step="0.01"      min="0"      placeholder="p. ex. 1.78"      required />    <span></span>  </div>  <div>    <span>Saisir votre taille — </span>    <label for="feet">pieds :</label>    <input type="number" name="feet" min="0" step="1" />    <span></span>    <label for="inches">pouces :</label>    <input type="number" name="inches" min="0" max="11" step="1" />    <span></span>  </div>  <div>    <input      type="button"           value="Saisir la taille en pieds/pouces" />  </div>  <div>    <input type="submit" value="Envoyer" />  </div></form>

Ici on utilise l'attributstep avec la valeur0.01 afin d'accepter une taille en centimètres. On fournit également un texte indicatif viaplaceholder.

Par défaut on masque la saisie en pieds avecstyle="display: none;".

La feuille CSS ressemble de près à celle vue précédemment :

div {  margin-bottom: 10px;  position: relative;}input[type="number"] {  width: 100px;}input + span {  padding-right: 30px;}input:invalid + span:after {  position: absolute;  content: "✖";  padding-left: 5px;}input:valid + span:after {  position: absolute;  content: "✓";  padding-left: 5px;}

Enfin, voici le code JavaScript utilisé :

let metersInputGroup = document.querySelector(".metersInputGroup");let feetInputGroup = document.querySelector(".feetInputGroup");let metersInput = document.querySelector("#meters");let feetInput = document.querySelector("#feet");let inchesInput = document.querySelector("#inches");let switchBtn = document.querySelector('input[type="button"]');switchBtn.addEventListener("click", function () {  if (switchBtn.getAttribute("class") === "meters") {    switchBtn.setAttribute("class", "feet");    switchBtn.value = "Saisir la taille en mètres";    metersInputGroup.style.display = "none";    feetInputGroup.style.display = "block";    feetInput.setAttribute("required", "");    inchesInput.setAttribute("required", "");    metersInput.removeAttribute("required");    metersInput.value = "";  } else {    switchBtn.setAttribute("class", "meters");    switchBtn.value = "Saisir la taille en pieds";    metersInputGroup.style.display = "block";    feetInputGroup.style.display = "none";    feetInput.removeAttribute("required");    inchesInput.removeAttribute("required");    metersInput.setAttribute("required", "");    feetInput.value = "";    inchesInput.value = "";  }});

Après avoir déclaré quelques variables, on ajoute un gestionnaire d'évènements au bouton afin de gérer le changement d'unités. Lors de ce changement, on modifiera la classe du bouton et l'étiquette associée et on mettra à jour les valeurs affichées lorsque l'utilisatrice ou l'utilisateur appuie sur le bouton. On notera qu'il n'y a pas de mécanisme de conversion entre les mètres et les pieds (ce qui serait vraisemblablement implémenté dans une application réelle).

Spécifications

Compatibilité des navigateurs

Voir aussi

• [Guide sur les formulaires HTML](/fr/docs//Learn_web_development/Extensions/Forms)
• <input>
• <input type="tel">
• La compatibilité des propriétés CSS pour les contrôles de formulaires