Niveau : Débutant

Formulaires HTML5 : Champ de type number

Tutoriel par (WebDesigner grapilleur de Kiwiz, Strasbourg)
Créé le , mis à jour le (155298 lectures)
Tags : formulaire, type, html5, input, number

Sommaire


Champ de type number

Le type de champ number permet de renseigner une valeur numérique.

<input type="number" name="howmuch">

Le champ de formulaire est alors transformé en une sorte de boite permettant l'incrémentation et la décrémentation d'une valeur numérique initiale (0 par défaut), lorsque la prise en charge par le navigateur est complète.


Lorsque ce type de champ est pris en charge par le navigateur, celui-ci renvoie la valeur numérique renseignée dans ce champ. Si un autre type de contenu est renseigné, aucune valeur n'est retournée à la soumission du formulaire.

À noter que les tests sous SmartPhone (ici iPhone) nous ont présenté un clavier de type numérique.

L'attribut step

Cet attribut permet de définir le pas de l'incrémentation.

<input type="number" step="8">

Dans le cas de ce code HTML, l'incrémentation et la décrémentation se feront de 8 en 8, les valeurs négatives étant admises.

Internet Explorer 10 prend en charge step en affichant une erreur lorsque le chiffre renseigné "manuellement" n'est pas un multiple du pas ; mais il n'affiche pas de bouton d'incrémentation. Le seul regret étant que le message d'erreur n'affiche aucun indice à l'utilisateur sur le pas.

Démonstration

Les attributs min et max

Ces deux attributs permettent de limiter le nombre dans un intervalle défini.

<input type="number" step="8" value="0" min="0" max="64">

Ici les possibilités pour l'utilisateur vont être minces, puisqu'en partant de 0 (value), il pourra choisir les valeurs de 8 en 8 (step) comprises entre 0 (min) et 64 (max).

Compatibilité du type number
Navigateurs Versions Détails
Internet Explorer Internet Explorer 10 Affiche un champ de type text. Doit respecter un pattern numérique.
Firefox Firefox 4 - 10
Firefox Mobile (Android 4)
Affiche un champ de type text.
Affiche un champ de type text et clavier numérique.
Chrome Chrome 10+
Chrome Mobile Beta (Android 4)
Affiche un champ avec bouton d'incrémentation et décrémentation.
Fonctionnait partiellement sous Chrome 9. Aucun pattern à respecter mais ne renvoit aucune valeur si différente d'un pattern numérique.
Alignement à gauche du nombre.
Affiche un champ classique avec clavier numérique.
Opera Opera 11+
Opera Mobile (Android 4)
Affiche un champ avec bouton d'incrémentation et décrémentation.
Aucun pattern à respecter mais ne renvoit aucune valeur si différente d'un pattern numérique.
Alignement  à droite du nombre.
Identique sous mobile.
Safari

Safari 5+
Safari Mobile (iOS 4)

Affiche un champ avec bouton d'incrémentation et décrémentation.
Aucun pattern à respecter mais ne renvoit aucune valeur si différente d'un pattern numérique.
Alignement à gauche du nombre.
Affiche un champ de type text avec clavier numérique. (Safari mobile)
Android Browser Android Browser 3.1+ Affiche un champ de type text avec clavier numérique.

 

Démonstration

À noter : ces attributs sont également utilisables pour les champs de datation, les valeurs de step, min et max étant à adapter dans leur format.