La spécification HTML propose de nombreux types d’<input> qui vous éviteront énormément de code et amélioreront votre IHM.

Pourquoi les bonnes balises?

Les balises HTML <input> indiquent un champ que l’utilisateur peut remplir. Trop souvent, le type text est utilisé à tort et à travers. En réalité, de nombreux autres type existent et doivent être utilisées, pour que le navigateur puisse afficher la représentation la plus adaptée au support de navigation (support que le webmaster ne peut pas connaitre, encore moins forcer). Utiliser les bons types d’input facilitera alors la vie de l’utilisateur (son navigateur l’aidera à remplir facilement les formulaires) et celle du développeur (il n’aura pas à coder des checks compliqués en Javascript). Voici la liste de ces types disponibles (consultez la spec HTML pour une liste actualisée).

Liste des type d’input

text

L’utilisateur entrera un texte.

password

L’utilisateur entrera un mot de passe. Souvent, celui-ci sera masqué par des • mais ce masquage est un réglage utilisateur: libre à celui qui visite votre site web de choisir si les champs contenant des mots de passe doivent être masqués ou non (cf Edge), enregistrés ou non.

checkbox

L’utilisateur entrera un choix multiple. Certains considèrent, à tort d’après le standard, que ce type d’entrée ne permet uniquement de faire des cases à cocher. Non, ce type d’entrée convient à tout choix ou option possédant deux états disjoints (donc, pouvant être “activé” ou “désactivé”). Par exemple, cela permet de créer des menus déroulants sans javascript, de proposer un choix “Pour/Contre”, ou encore de représenter un flag.

radio

L’utilisateur peut choisir une entrée parmi une liste d’entrées prédéfinies. Souvent, on ne visualise ce type d’entrée que sous la forme d’un bouton “radio” (ressemblant à ○), mais cela peut avoir d’autres applications, comme présenter des choix incompatibles entre eux (sexe de la personne), ou créer un système d’onglets (afficher un onglet revient à choisir une “entrée” parmi la liste des onglets).

button

Représente simplement un bouton. On peut considérer qu’il s’agit donc d’une entrée permettant d’effectuer une action quelconque, contrairement à la balise d’ancre <a> qui représente uniquement un moyen de naviguer.

submit

Similaire à button, mais dans l’unique but de soumettre un formulaire <form>. Chaque formulaire devrait en avoir un, quitte à le masquer en CSS.

reset

Similaire à <button>, mais utilisé uniquement pour la remise à zéro d’un formulaire.

file

Représente une liste d’un ou plusieurs fichiers.

hidden

Représente un champ d’entrée qui n’est pas destiné à l’utilisateur. Cela peut sembler paradoxal, mais une balise <input/> n’est pas forcément remplie par l’utilisateur: elle peut être remplie par un script (javascript), par le serveur (cas des token, contre le CSRF qui fera l’objet d’un autre article) ou par tout autre programme (plugin par exemple).

image

Permet à l’utilisateur de choisir un point dans une image et de soumettre le formulaire dans la foulée. Ce type d’entrée est donc adaptée à la sélection d’un lieu sur une carte par exemple, mais ne doit pas servir à utiliser une image décorative pour valider un formulaire (utilisez plutôt le type submit, en lui appliquant le CSS background-image: url(…);).

datetime

Permet d’entrer une date et une heure en incluant un fuseau horaire. Ce genre de typage permettra au navigateur d’afficher un calendrier, incluant par exemple les dates de rendez-vous de l’utilisateur. Je vous déconseille très fortement d’utiliser une technologie tierce pour créer vous-même ce calendrier (toute la clique de plugin/libs javascript par exemple). En effet, sur PC, un calendrier classique (sous forme d’une grille des jours) sera adapté, mais l’utilisateur peut très bien visiter votre site depuis une tablette, un mobile, une montre connectée, ou sa voiture. Dans ces cas-là, un tel calendrier ne sera pas une bonne méthode d’entrée.

En règle générale, n’allez pas forcer les utilisateurs à se plier à votre ergonomie personnelle: utilisez des typages standards, quitte à ce que les vieux navigateurs soient de coté.

datetime-local

Identique à datetime, sans le fuseau horaire de l’utilisateur.

Sélectionnez une date et une heure sur Smartphone
Que pensez-vous du calendrier natif du Smartphone? Rien de ce qui est à l’écran n’est dans le site ! Moins de code, pour plus d’ergonomie.

date

Identique à datetime, mais sans l’heure ni le fuseau horaire (puisque l’utilisateur ne choisit que la date). Attention donc au fait que la date 01/01/2000 à UTC peut être à 1 jour d’écart de la date d’un fuseau comme UTC+14 (oui, ça existe) ou UTC-11.

Choisir une date sur Smartphone
Le site ne gère par le calendrier: le Smartphone, nativement, le propose.

month

Identique à date, sauf que l’on ne choisira que le mois et l’année.

Sélectionnez un mois sur Smartphone
Les mois sont dans la langue de l’utilisateur, puisque les fonctions natives du navigateur sont utilisées.

time

Identique à datetime-local, en n’indiquant que l’heure (sans fuseau horaire), sans la date.

Le choix d'un horaire sur un Smartphone
Choisir un horaire devient intuitif et facile quand le champ est du bon type !

week

Identique à date, sauf que l’utilisateur sélectionne une semaine et non un jour.

Choix d'une semaine sur un calendrier
Nativement, le Smartphone propose un calendrier hebdomadaire si le champ est de type ‘week’

number

Permet d’entrer un nombre, y compris un nombre à virgule.

Entrer un nombre via le clavier numérique d'un Smartphone
Le type du champ étant ‘number’, un Smartphone proposera un clavier virtuel numérique

range

Permet également de rentrer un nombre, mais à la condition que sa précision ne soit pas nécessaire (il s’agit donc d’entrer une valeur “en gros”).

email

Permet d’entrer une liste d’adresses mails. La liste peut ne contenir qu’un seul mail.

Entrez une adresse mail via l'interface du Smartphone
Entrer un email sera facilité par la présence de l’@ sur le clavier virtuel, mais le Smartphone pourra aussi vous proposer de récupérer le mail d’un de vos contacts.

url

Permet d’indiquer une adresse URL quelconque. Le navigateur pourrait également afficher les favoris de l’utilisateur pour qu’il puisse rapidement sélectionner une URL.

Entrer un lien (URL) sur Smartphone
Entrer une adresse URL sera facilité par la présence des touches “/” et “.”, ou en vous permettant de récupérer l’URL d’un de vos favoris.

search

Identique à text, mais cette valeur est entrée dans le but d’être recherchée (cela peut être sur tout le site, dans une base de données, dans un fichier du serveur, dans le contenu de la page courante, ou n’importe où ailleurs).

Un champ de recherche sur Smartphone
Le champ ‘search’ natif d’un Smartphone propose la complétion de mots

tel

Le champ contiendra un (et un seul) numéro de téléphone. Attention: la structure des numéros de téléphone peut varier d’un pays à l’autre.

Entrer un numéro de téléphone avec un Smartphone: logique!
Non seulement le clavier affiché est adapté, mais certains Smartphone pourront vous proposer de récupérer le numéro d’un de vos contacts !

color

L’utilisateur est invité à entrer une couleur.

Sélectionner une couleur sur smartphone
Un exemple de sélecteur de couleurs natif sur smartphone

Consultez aussi la page du MDN sur HTMLInputElement.