<input> : l'élément de saisie dans un formulaire

L'élément HTML <input> est utilisé pour créer un contrôle interactif dans un formulaire web qui permet à l'utilisatrice ou l'utilisateur de saisir des données. Les saisies possibles et le comportement de l'élément <input> dépendent fortement de la valeur indiquée dans son attribut type et de ses autres attributs. Il existe différents contrôles pour la saisie, qui dépendent de l'appareil utilisé et de l'agent utilisateur.

Exemple interactif

Les différents types de champs <input>

La façon dont un élément <input> fonctionne dépend grandement de la valeur de son attribut type. Aussi, pour chacun de ces types, on aura une page de référence dédiée. Par défaut, lorsque l'attribut type n'est pas présent, il aura la valeur implicite text.

Type Description Exemple simple
button Un bouton sans comportement défini qui affiche la valeur de l'attribut value qui est vide par défaut.
checkbox Une case à cocher qui permet de sélectionner/désélectionner une valeur.
color Un contrôle qui permet de définir une couleur, cela ouvre un sélecteur de couleur dans les navigateurs qui le prennent en charge.
date Un contrôle qui permet de saisir une date (composé d'un jour, d'un mois et d'une année mais sans heure), cela ouvre un sélecteur de date ou des roues numériques pour la sélection du jour/mois/année dans les navigateurs qui le prennent en charge.
datetime-local Un contrôle qui permet de saisir une date et une heure (sans fuseau horaire), cela ouvre un sélecteur de date ou des roues numériques pour la sélection de la date et de l'heure dans les navigateurs qui le prennent en charge.
email Un champ qui permet de saisir une adresse électronique, il ressemble à un champ de type text, mais possède des fonctionnalités de validation et l'adaptation du clavier pour les navigateurs et appareils qui ont des claviers dynamiques.
file Un contrôle qui permet de sélectionner un fichier. L'attribut accept peut être utilisé pour définir les types de fichiers qui peuvent être sélectionnés.
hidden Un contrôle qui n'est pas affiché mais dont la valeur est envoyée au serveur. Il y a un exemple dans la colonne à côté, mais il est caché !
image Un bouton graphique d'envoi du formulaire. L'attribut src doit être défini avec la source de l'image et l'attribut alt doit être défini avec le texte alternatif si l'image est absente.
month Un contrôle qui permet de saisir un mois et une année (sans fuseau horaire).
number Un contrôle qui permet de saisir un nombre, affichant des curseurs pour augmenter/réduire la valeur et disposant d'une validation par défaut lorsqu'elle est prise en charge. Un clavier numérique est affiché pour certains appareils avec des claviers dynamiques.
password Un champ texte sur une seule ligne dont la valeur est masquée et qui affichera une alerte si le site n'est pas sécurisé.
radio Un bouton radio qui permet de sélectionner une seule valeur parmi un groupe de différentes valeurs portant le même attribut name.
range Un contrôle qui permet de saisir un nombre dont la valeur exacte n'est pas importante. Le contrôle qui s'affiche est une jauge horizontale avec la valeur par défaut placée au milieu. On l'utilise avec les attributs min et max pour définir un intervalle des valeurs acceptables.
reset Un bouton qui réinitialise le contenu du formulaire avec les valeurs par défaut. Ce type d'élément n'est pas recommandé.
search Un champ texte sur une ligne pour des termes de recherche. Les sauts de ligne sont automatiquement retirés. Le contrôle peut disposer d'une icône permettant de réinitialiser le champ. Une icône de recherche est affichée à la place de la touche Entrée/ pour certains appareils avec des claviers dynamiques.
submit Un bouton qui envoie le formulaire.
tel Un contrôle pour saisir un numéro de téléphone, qui affiche un clavier téléphonique pour certains appareils avec des claviers dynamiques.
text La valeur par défaut de type. Un champ texte sur une seule ligne. Les sauts de ligne sont automatiquement retirés.
time Un contrôle pour saisir une valeur temporelle sans fuseau horaire.
url Un champ permettant de saisir une URL. Ce contrôle ressemble à un champ de type text, mais dispose de paramètres de validation et d'un clavier adapté pour les navigateurs et appareils qui le prennent en charge et qui ont un clavier dynamique.
week Un contrôle permettant de saisir une date représentée par un numéro de semaine et une année (sans indication de fuseau horaire).
Valeurs obsolètes
datetime Obsolète Un contrôle pour saisir une date et une heure selon un fuseau horaire UTC.

Attributs

L'élément <input> est l'un des éléments HTML les plus complexes et puissants en raison de ses attributs et notamment de type, le plus important. Chaque élément <input>, quel que soit son type, étant basé sur l'interface DOM HTMLInputElement, ils partagent tous, techniquement, les mêmes attributs. Toutefois, certains attributs ne fonctionnent que pour certains types de champs et certains attributs fonctionnent spécifiquement selon le type de champ.

Dans cette section, nous verrons un tableau qui liste l'ensemble des attributs avec une rapide description. Ce tableau est suivi d'une liste plus détaillée de chaque attribut et des types auxquels ils sont associés. Les attributs communs à tous les types sont détaillés dans cet article, ceux qui sont uniques à certains types ou qui ont un comportement spécifique pour un type donné sont documentés sur les pages des types respectifs.

Sur cette page, vous trouverez des informations sur les attributs communs à l'ensemble des types d'éléments <input> ainsi que la description de quelques attributs notables.

Les éléments <input> peuvent utiliser les attributs universels et les attributs suivants :

Attribut Type(s) Description
accept file Une indication quant au type de fichier attendu pour l'upload
alt image Un texte alternatif à l'image, nécessaire pour une accessibilité correcte
autocapitalize tous sauf url, email et password Contrôle la mise en majuscule automatique du text saisie.
autocomplete tous sauf checkbox, radio et les boutons Une indication pour le remplissage automatique du formulaire
capture file La méthode de capture du média pour l'upload du fichier
checked radio, checkbox Indique si l'option est sélectionnée ou si la case est cochée
dirname hidden, text, search, url, tel, email Le nom du champ de formulaire à utiliser pour envoyer le sens d'écriture de l'élément à l'envoi du formulaire
disabled tous Indique si le contrôle est désactivé
form tous Associe un contrôle à un élément de formulaire
formaction image, submit L'URL à utiliser pour l'envoi du formulaire
formenctype image, submit L'encodage des données à utiliser pour l'envoi du formulaire
formmethod image, submit La méthode HTTP à utiliser pour envoyer le formulaire
formnovalidate image, submit Surcharge la validation du contrôle dictée par le formulaire pour l'envoi de ce dernier
formtarget image, submit Le contexte de navigation à utiliser pour l'envoi du formulaire
height image Analogue à l'attribut height de l'élément <img>, la hauteur de l'image
list tous sauf hidden, password, checkbox, radio et les boutons La valeur de l'attribut id de l'élément <datalist> fournissant les options d'autocomplétion
max date, month, week, time, datetime-local, number, range La valeur maximale
maxlength text, search, url, tel, email, password La longueur maximale (en nombre de caractères) de l'attribut value
min date, month, week, time, datetime-local, number, range La valeur minimale
minlength text, search, url, tel, email, password La longueur minimale (en nombre de caractères) de l'attribut value
multiple email, file Un booléen indiquant si plusieurs valeurs sont acceptées
name tous Le nom associé au contrôle et qui est envoyé avec le formulaire associé à la valeur sous la forme d'une paire nom/valeur
pattern text, search, url, tel, email, password Un motif que la valeur doit respecter afin d'être valide
placeholder text, search, url, tel, email, password, number Un texte qui apparaît dans le contrôle lorsqu'aucune valeur n'y est écrite
popovertarget button Définit un <input type="button"> en tant que contrôle pour un élément popover
popovertargetaction button Définit l'action que le popover va devoir accomplir
readonly tous sauf hidden, range, color, checkbox, radio et les boutons Un booléen indiquant que la valeur n'est pas éditable
required tous sauf hidden, range, color et les boutons Un booléen indiquant que la valeur est requise ou que le contrôle doit être coché avant de pouvoir envoyer le formulaire
size text, search, url, tel, email, password La taille du contrôle
src image Analogue à l'attribut src de l'élément <img>, indique l'emplacement de l'image
step date, month, week, time, datetime-local, number, range Un incrément pour les valeurs valides
type tous Le type de contrôle de formulaire
value tous sauf image La valeur initiale du contrôle
width image Analogue à l'attribut width de l'élément <img>, la largeur de l'image

Certains attributs non-standard supplémentaires sont listés après les descriptions des attributs standard.

Attributs individuels

accept

Uniquement valide pour le type file, cet attribut définit les types de fichiers qui peuvent être sélectionnés. Voir la page détaillée sur <input type="file">.

alt

Uniquement valide pour le type image, cet attribut fournit un texte alternatif à l'image qui est affiché lorsque l'attribut src de l'image est absent ou que le chargement de l'image a échoué. Voir la page détaillée sur <input type="image">.

autocapitalize

Contrôle si le texte saisi doit être automatiquement mis en majuscule et, le cas échéant, de quelle manière. Voir la page de l'attribut universel autocapitalize pour plus d'informations.

autocomplete

Cet attribut n'est pas booléen ! Il prend comme valeur une chaîne de caractères dont les valeurs sont séparées par des espaces qui décrivent, le cas échéant, le type de fonctionnalité à fournir pour l'autocomplétion du champ. Généralement, l'implémentation de l'autocomplétion repose sur les valeurs précédemment saisies dans le même champ, mais le navigateur peut implémenter une forme d'autocomplétion plus avancée (par exemple intégrer la liste des contacts connue de l'appareil pour autocompléter les champs email). Voir la page sur cet attribut pour les valeurs autorisées. Cet attribut est valide pour les types de champ hidden, text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color, et password. Il n'a pas d'effet pour les types de champs qui ne renvoient pas de données numériques ou text et est donc valide pour tous les types de champs à l'exception de checkbox, radio, file, ou des types de bouton. Voir la page de l'attribut HTML autocomplete pour plus d'informations, y compris sur la sécurité des mots de passe et sur la façon dont autocomplete s'applique légèrement différemment pour les champs de type hidden.

autofocus

Un attribut booléen qui, s'il est présent, indique que le contrôle devrait automatiquement recevoir le focus lorsque le chargement de la page est terminé (ou lorsque l'élément <dialog> qui contient ce contrôle a été affiché).

Note : Un élément avec l'attribut autofocus pourra recevoir le focus avant le déclenchement de l'évènement DOMContentLoaded.

Il ne peut pas y avoir plus d'un élément du document avec l'attribut autofocus. Si l'attribut est placé sur plus d'un élément, c'est le premier qui reçoit le focus.

L'attribut autofocus ne peut pas être utilisé sur les champs de type hidden, car ces derniers sont masqués et ne peuvent pas recevoir le focus.

Attention : Affecter le focus de façon automatique peut être source de confusion pour les personnes qui utilisent des lecteurs d'écran ou qui ont des difficultés cognitives. En effet, avec l'affectation d'autofocus, les lecteurs d'écran « téléportent » la personne jusqu'au contrôle, sans avertissement préalable.

On fera particulièrement attention à l'accessibilité en appliquant l'attribut autofocus. Le focus automatique peut entraîner le défilement de la page au chargement et faire apparaître le clavier logiciel sur certains appareils tactiles. Bien qu'un lecteur d'écran puisse annoncer le libellé du contrôle qui reçoit le focus, il n'annoncera rien avant le libellé. De même, une personne sans déficience visuelle sur un petit écran manquera certainement le contexte créé par le contenu qui précède.

capture

Cet attribut, introduit avec la spécification HTML Media Capture, est uniquement valide pour le type file. Il définit quel appareil (micro, caméra, appareil photo) qui devrait être utilisé pour capturer un nouveau fichier à uploader. Voir la page détaillée sur <input type="file">.

checked

Cet attribut booléen est valide pour les types radio et checkbox. Lorsqu'il est présent sur un contrôle de type radio, il indique que ce bouton radio sera celui sélectionné parmi le groupe de boutons radio qui partagent le même nom. Lorsqu'il est présent sur un contrôle de type checkbox, il indique que la case est cochée par défaut au chargement de la page. Attention, il n'indique pas que la case est actuellement cochée, si l'état de la case à cocher change, l'attribut ne reflète pas ce changement (seul l'attribut IDL HTMLInputElement.checked est mis à jour).

Note : À la différence des autres contrôles de saisie, la valeur d'une case à cocher ou d'un bouton radio est uniquement incluse dans les données envoyées s'ils sont sélectionnés. Si c'est le cas, le nom et la valeur des contrôles sélectionnés sont envoyés.

Ainsi, si une case à cocher dont l'attribut name vaut fruit et dont l'attribut value vaut cerise, si la case est cochée, les données envoyées avec le formulaire contiendront fruit=cerise. Si la case à cocher n'est pas active, elle ne fera pas partie des données envoyées. Pour les cases à cocher et les boutons radio, la valeur par défaut de l'attribut value est on.

dirname

Cet attribut, uniquement valide pour les types text et search, permet d'envoyer également le sens d'écriture de la valeur dans le formulaire. Lorsqu'il est présent, le contrôle du formulaire enverra deux paires nom/valeur : la première composée de name et value, et la seconde composée de la valeur de dirname comme nom et de ltr ou rtl comme valeur, indiquée par le navigateur.

html
<form action="page.html" method="post">
  <label
    >Fruit :
    <input type="text" name="fruit" dirname="fruit.dir" value="cerise"
  /></label>
  <input type="submit" />
</form>
<!-- page.html?fruit=cerise&fruit.dir=ltr -->

Lorsque le formulaire précédent est envoyé, on aura l'envoi de deux paires de clé/valeur name/value d'une part avec fruit=cerise et dirname/sens d'écriture d'autre part avec fruit.dir=ltr.

disabled

Un attribut booléen qui, lorsqu'il est présent, indique qu'il n'est pas possible d'interagir avec le champ. Les champs désactivés sont généralement affichés avec une couleur plus sombre ou une autre forme d'indication pour signifier que le champ n'est pas utilisable.

Plus précisément, les champs désactivés ne reçoivent pas les évènements click et ne sont pas envoyés avec le formulaire.

Note : Bien que cela ne soit pas nécessaire selon la spécification, par défaut, Firefox fera persister l'état désactivé obtenu dynamiquement pour un champ <input> même après des rechargements de la page. C'est l'attribut autocomplete qui contrôle cette fonctionnalité.

form

Une chaîne de caractères qui indique l'élément <form> auquel le contrôle est associé (on parle de son formulaire propriétaire). La valeur de la chaîne de caractères, si elle est présente, doit correspondre à la valeur d'un identifiant (l'attribut id) d'un élément <form> du même document. Si cet attribut n'est pas défini, l'élément <input> est associé au formulaire qui le contient le plus proche, s'il existe.

L'attribut form permet ainsi de placer un champ n'importe où dans le document tout en l'associant à un formulaire du document situé autre part.

Note : Un champ peut uniquement être associé avec un seul formulaire.

formaction

Uniquement valide pour les types image et submit. Voir la page détaillée sur <input type="submit">.

formenctype

Uniquement valide pour les types image et submit. Voir la page détaillée sur <input type="submit">.

formmethod

Uniquement valide pour les types image et submit. Voir la page détaillée sur <input type="submit">.

formnovalidate

Uniquement valide pour les types image et submit. Voir la page détaillée sur <input type="submit">.

formtarget

Uniquement valide pour les types image et submit. Voir la page détaillée sur <input type="submit">.

height

Uniquement valide pour le type image, cet attribut indique la hauteur de l'image à afficher sur un bouton d'envoi graphique. Voir la page détaillée sur <input type="image">.

id

Un attribut universel, valide pour tous les éléments (y compris <input> quel que soit le type), qui définit un identifiant unique au sein du document Son but est de pouvoir cibler un élément précis (pour la mise en forme ou pour créer un lien vers cet élément par exemple). C'est la valeur de cet attribut qui sera utilisée comme valeur de l'attribut for d'un élément <label> pour relier le libellé au champ correspondant. Voir <label>.

inputmode

Un attribut universel, valide pour tous les éléments, qui fournit une indication au navigateur quant au type de clavier virtuel à utiliser pour l'édition de l'élément ou de son contenu. Les valeurs possibles sont none, text, tel, url, email, numeric, decimal, et search.

list

La valeur fournie à l'attribut list doit être l'identifiant (l'attribut id) d'un élément <datalist> situé dans le même document. L'élément <datalist> fournit alors une liste de valeurs prédéfinies qui peuvent être suggérées pour la saisie dans le champ. Toute valeur de cette liste qui n'est pas compatible avec l'attribut type ne sera pas incluse dans les suggestions. Les valeurs ainsi fournies sont des suggestions et pas des contraintes, une personne pourra tout à fait choisir parmi cette liste ou fournir une valeur différente.

Cet attribut est valide pour les champs de type text, search, url, tel, email, date, month, week, time, datetime-local, number, range, et color.

Selon la spécification, l'attribut list n'est pas pris en charge pour les types hidden, password, checkbox, radio, file, et les types de bouton.

Selon le navigateur, on pourra avoir une palette de couleurs spécifiques en suggestion, des marques présentes sur la piste d'un curseur, voire un contrôle s'ouvrant comme un élément <select> et qui permet de saisir des valeurs en dehors des suggestions. Voir le tableau de compatibilité des navigateurs pour les autres types de champ.

Voir également la page de référence pour l'élément <datalist>.

max

Cet attribut est valide pour les types date, month, week, time, datetime-local, number, et range, il définit la plus grande valeur possible de l'intervalle des valeurs autorisées. Si la valeur saisie dans l'élément dépasse la valeur de cet attribut, l'élément échouera à la validation des contraintes. Si la valeur de l'attribut max n'est pas un nombre, l'élément n'a pas de valeur maximale.

Il existe un cas particulier pour les types de données périodiques (comme les dates ou les heures), où la valeur de max peut être inférieure à celle de min, pour avoir par exemple un intervalle de temps entre 10 heures du soir et 4 heures du matin.

maxlength

Cet attribut est valide pour les types text, search, url, tel, email, et password, il définit le nombre maximal de caractères (exprimé en nombre de codets UTF-16) qu'il est possible de saisir dans le champ. La valeur de cet attribut doit être un entier positif. Si aucune valeur de maxlength n'est indiquée ou qu'une valeur invalide est fournie, le champ n'a pas de longueur maximale. La valeur de cet attribut doit être supérieure ou égale à celle de minlength.

Le champ échouera à la validation des contraintes si longueur du texte saisi est supérieure à maxlength comme nombre de codets UTF-16. Par défaut, les navigateurs empêchent de saisir plus de caractères que ce qui est permis par l'attribut maxlength. Voir la validation côté client pour plus d'information.

min

Cet attribut est valide pour les types date, month, week, time, datetime-local, number, et range, il définit la valeur la plus faible de l'intervalle des valeurs autorisées. Si la valeur saisie dans l'élément est inférieure à la valeur de cet attribut, l'élément échouera à la validation des contraintes. Si la valeur de l'attribut min n'est pas un nombre, l'élément n'a pas de valeur minimale.

Cette valeur doit être inférieure ou égale à la valeur fournie par l'attribut max. Si l'attribut min est présent mais sans valeur ou avec une valeur invalide, aucune contrainte de minimum n'est appliquée. Si l'attribut min est valide et que la valeur saisie dans le contrôle est inférieure à celle de cet attribut, la validation des contraintes empêchera l'envoi du formulaire. Voir la validation côté client pour plus d'information.

Il existe un cas particulier pour les types de données périodiques (comme les dates ou les heures), où la valeur de max peut être inférieure à celle de min, pour avoir par exemple un intervalle de temps entre 10 heures du soir et 4 heures du matin.

minlength

Cet attribut est valide pour les types text, search, url, tel, email, et password, il définit le nombre minimal de caractères (exprimé en nombre de codets UTF-16) qu'il est possible de saisir dans le champ. La valeur de cet attribut doit être un entier positif inférieur ou égal à celle de maxlength. Si cet attribut est absent ou qu'une valeur invalide est indiquée, le champ n'aura pas de longueur minimale.

Le champ échouera à la validation des contraintes si longueur du texte saisi est inférieure à minlength comme nombre de codets UTF-16. Voir la validation côté client pour plus d'information.

multiple

Un attribut booléen qui, lorsqu'il est présent, permet de saisir plusieurs adresses électroniques séparées par des virgules ou de sélectionner plusieurs fichiers si le contrôle est de type file. Voir les page détaillées sur <input type="file"> et <input type="email">.

name

Une chaîne de caractères qui fourni le nom associé au contrôle. Le nom est envoyé avec la valeur du contrôle lors de l'envoi du formulaire.

Cet attribut n'est pas strictement obligatoire mais devrait être utilisé dans la grande majorité des cas. Si un champ n'a pas d'attribut name ou que celui-ci est vide, la valeur du champ n'est pas envoyée avec le formulaire (à l'instar des contrôles désactivés, des boutons radio ou cases décochés, et des boutons de réinitialisation).

Il existe deux cas spéciaux :

  • _charset_ : Si cette valeur est utilisée comme nom pour un élément <input> de type hidden, la valeur du champ est automatiquement renseignée par l'agent utilisateur et porte l'encodage de caractères utilisé pour l'envoi du formulaire.
  • isindex : Pour des raisons historiques, le nom isindex n'est pas autorisé.

L'attribut name possède un comportement particulier pour les boutons radio.

En effet, seul un bouton radio, parmi le groupe de boutons qui portent le même nom, peut être sélectionné à un moment donné. Sélectionner un des boutons radio du groupe déclenchera automatiquement la désélection de tout bouton du groupe précédemment sélectionné. C'est la valeur du bouton radio sélectionné qui est envoyé avec le nom lors de l'envoi du formulaire.

Lors de la navigation au clavier avec les tabulations, si un bouton est sélectionné, c'est celui-ci qui recevra le focus. Même si les boutons ne sont pas regroupés selon la source HTML, si un bouton du groupe est sélectionné, naviguer au clavier jusqu'à ce groupe passera tous les boutons non sélectionnés jusqu'au bouton sélectionné. Si aucun bouton du groupe n'est sélectionné, le groupe reçoit le focus lorsque le premier bouton du groupe est atteint au clavier.

Une fois le focus obtenu sur le groupe, on pourra utiliser les flèches du clavier pour naviguer entre les boutons radio du même groupe (c'est-à-dire partageant le même nom/name, et pas nécessairement groupés au sein de la source HTML).

Lorsqu'un élément <input> possède un attribut name, ce nom devient une propriété de l'objet HTMLFormElement.elements associé au formulaire propriétaire. Ainsi, si on a un champ dont le nom est invite et un autre dont le nom est taille-chat, on pourra manipuler les données du formulaire en JavaScript comme suit :

js
let form = document.querySelector("form");

let nomInvite = form.elements.invite;
let tailleChat = form.elements["taille-chat"];

À l'exécution de ce code, nomInvite correspondra à l'objet HTMLInputElement associé au champ invite, et de même l'objet tailleChat correspondra à l'objet du DOM associé au champ avec le nom taille-chat.

Attention : On évitera de donner aux éléments de formulaire un nom qui correspond à une propriété native du DOM. Cela surchargerait la propriété ou la méthode native pour pointer vers le champ correspondant.

pattern

Valie pour les champs de type text, search, url, tel, email, cet attribut est une expression rationnelle que la valeur du champ doit respecter afin de valider les contraintes. Cette valeur doit être une expression rationnelle JavaScript valide (voir RegExp) telle que documentée dans le guide sur les expressions rationnelles. Le marqueur 'u' est implicitement appliqué à la compilation de l'expression et le motif est donc traité comme une séquence de codets Unicode et non ASCII. Il ne faut pas encadrer le motif de barres obliques.

Si l'attribut pattern est présent mais sans valeur ou que celle-ci est valide, aucune expression rationnelle n'est appliquée et l'attribut est ignoré. Si la valeur de pattern est valide et que la valeur du champ ne respecte pas le motif, le champ échouera à la validation des contraintes et empêchera l'envoi du formulaire.

Note : En utilisant l'attribut pattern, il faut également informer l'utilisatrice ou l'utilisateur quant au format attendu, en ajoutant un texte explicatif à proximité. On peut aussi inclure un attribut title pour expliquer les contraintes à respecter : la plupart des navigateurs afficheront le titre sous la forme d'une bulle d'information. Attention, une explication visible est nécessaire pour une accessibilité correcte, la bulle d'information fournie par title n'est qu'une amélioration secondaire.

Voir la validation côté client pour plus d'information.

placeholder

Valide pour les champs de type text, search, url, tel, email, password, et number, cet attribut est une chaîne de caractères qui fournit une brève indication quant au type d'information attendu dans le champ. Sa valeur devrait être un mot ou une courte phrase qui indique le type de données attendu plutôt qu'une explication ou une consigne. Le texte de cet attribut ne doit pas inclure de retour chariot ou de saut de ligne. Ainsi, si un champ est destiné à la saisie d'un prénom et que le libellé est « Prénom », une valeur appropriée pour cet attribut pourra être "ex. Mustafa".

Note : Sur le plan sémantique, l'attribut placeholder n'est pas aussi utile que d'autres méthodes pour expliquer le formulaire. Il peut aussi causer certains problèmes inattendus avec le contenu. Voir les libellés pour plus d'informations.

popovertarget

Transforme un élément <input type="button"> en un contrôleur de popover. Il prend comme valeur l'id de l'élément popover à contrôler. Voir la page de l'API Popover pour plus d'informations.

popovertargetaction

Définit l'action à accomplir sur l'élément popover contrôlé par l'élément <input type="button">. Les valeurs possibles sont :

"hide"

Le bouton va masquer un popover affiché. Si vous essayez de masquer un popover déjà masqué, aucune action ne sera effectuée.

"show"

Le bouton va afficher un popover masqué. Si vous essayez d'afficher un popover déjà affiché, aucune action ne sera effectuée.

"toggle"

Le bouton va basculer un popover entre les états affiché et masqué. Si le popover est masqué, il sera affiché ; si le popover est affiché, il sera masqué. Si popovertargetaction est omis, "toggle" est l'action par défaut qui sera effectuée par le bouton de contrôle.

readonly

Un attribut booléen qui, lorsqu'il est présent, indique qu'il ne devrait pas être possible d'éditer la valeur du champ. Cet attribut est pris en charge par les types de contrôle text, search, url, tel, email, date, month, week, time, datetime-local, number, et password.

Voir l'attribut HTML readonly pour plus d'informations.

required

Un attribut booléen qui, lorsqu'il est présent, indique qu'une valeur doit être saisie avant que le formulaire puisse être envoyé. Cet attribut est pris en charge pour les types de contrôle text, search, url, tel, email, date, month, week, time, datetime-local, number, password, checkbox, radio, et file.

Voir la validation côté client et l'attribut HTML required pour plus d'informations.

size

Cet attribut est uniquement valide pour les types de contrôle email, password, tel, url et text. Il indique la largeur visible pour le contrôle. D'une certaine façon, il crée un résultat analogue à l'application de la propriété CSS width. L'unité de cette valeur dépend du type de contrôle. Pour les champs de type password et text, il s'agit du nombre de caractères (équivalent à l'unité em) et la valeur par défaut vaut 20. Pour les autres types de champs, la valeur est exprimée en pixels. La largeur définie avec la feuille de style CSS aura la priorité sur cet attribut.

src

Cet attribut est uniquement valide pour le type image et indique l'URL du fichier de l'image à afficher sur le bouton. Voir <input type="image"> pour plus d'informations.

step

Cet attribut est valide pour les contrôles de type numériques et temporels (date, month, week, time, datetime-local, number, et range). L'attribut step est un nombre qui définit la granularité de la valeur.

S'il n'est pas explicitement inclus :

  • Pour les types number et range, sa valeur par défaut sera 1.
  • Pour les types temporels, la valeur par défaut de step dépend du type. Voir les pages individuelles pour plus de détails : date, datetime-local, month, time, et week.

La valeur de cet attribut doit être un nombre positif (entier ou décimal) ou la valeur spéciale any (cette dernière indiquant qu'il n'y a pas de contrainte de granularité et que toute valeur est autorisée (les contraintes imposées par min et max s'appliquent toujours)).

Si any n'est pas utilisé explicitement, les valeurs valides du champ pour les types temporels, number, et range seront celles construites depuis le minimum (min) en ajoutant l'incrément une ou plusieurs fois jusqu'à atteindre le maximum (max), si ce dernier est défini.

Ainsi, si on a <input type="number" min="10" step="2">, tout entier pair, supérieur ou égal à 10 sera valide. Si step est absent, par exemple avec <input type="number">, tous les nombres entiers seront valides mais les nombres décimaux (comme 4.2) seront invalides, car la valeur par défaut de step vaut 1 pour le type number. Afin que 4.2 soit valide, on devra utiliser la valeur any, ou 0.1, ou 0.2 pour l'attribut step, ou encore une valeur de min dont la partie fractionnaire vaut .2, par exemple <input type="number" min="-5.2">

Note : Lorsque la donnée saisie ne respecte pas l'incrément, la valeur est considérée comme invalide pour la validation des contraintes et l'élément sera ciblé par la pseudo-classe :invalid.

Voir la validation côté client pour plus d'information.

tabindex

Un attribut universel, valide pour tous les éléments, y compris tous les types de <input>. Sa valeur est un entier qui indique si l'élément peut prendre le focus et s'il devrait participer à la navigation séquentielle au clavier. Comme tous les types d'élément <input>, sauf ceux masqués, peuvent prendre le focus, cet attribut ne devrait pas être utilisé sur les contrôles de formulaire, car cela nécessiterait de gérer l'ordre du focus pour tous les éléments du document, au risque de dégradé l'utilisabilité et l'accessibilité si cela était fait de façon incorrecte.

title

Un attribut universel, valide pour tous les éléments, y compris tous les types de <input>. Sa valeur est un texte fournissant des informations à propos de l'élément auquel il appartient. Une telle information est généralement (mais pas nécessairement) affichée sous la forme d'une bulle d'information. title ne devrait pas être utilisé comme méthode principale pour expliquer le rôle d'un contrôle de formulaire. Il faut plutôt utiliser l'élément <label> avec un attribut for dont la valeur correspond à la valeur de l'attribut id du champ de formulaire. Voir la section sur les libellés ci-après.

type

Une chaîne de caractères qui indique le type de contrôle à afficher. On utilisera par exemple la valeur checkbox pour afficher une case à cocher. Si cet attribut est absent (ou qu'une valeur inconnue est utilisée), ce sera un champ de type text qui sera utilisé, permettant de saisir un texte dans le contrôle de formulaire.

Les valeurs autorisées pour cet attribut sont listées dans la section sur les types de champ ci-avant.

value

La valeur du contrôle. Lorsque cette valeur est fournie dans le document HTML, il s'agit de la valeur initiale, qui peut ensuite être récupérée et éventuellement modifiée avec JavaScript via la propriété du DOM correspondante : HTMLInputElement.value. Cet attribut est toujours optionnel en théorie, mais peut être considéré comme obligatoire en pratique pour les types de champ checkbox, radio, et hidden.

width

Cet attribut est uniquement valide pour le type de contrôle image, où il exprime la largeur du fichier d'image à afficher sur le bouton graphique. Voir <input type="image"> pour plus d'informations.

Attributs non-standards

Les attributs qui suivent ne sont pas standard et sont disponibles dans certains navigateurs uniquement. En règle général, il faut éviter de les utiliser.

Attribut Description
autocorrect Une chaîne de caractères, on ou off, qui indique si la correction automatique est activée. Uniquement dans Safari.
incremental Indique s'il faut envoyer ou non de multiples évènements search pour mettre à jour les résultats de recherche de façon dynamique lorsque la personne est toujours en train d'éditer la valeur du champ. Uniquement dans WebKit et Blink (Safari, Chrome, Opera, etc.).
mozactionhint

Une chaîne de caractères qui indique le type d'action qui sera réalisée lorsque la personne appuiera sur la touche Entrée ou Retour lors de l'édition du champ. Il est utilisé pour déterminer le libellé pertinent à utiliser sur un clavier virtuel.

Obsolète : il faut utiliser enterkeyhint à la place.

orient Définit l'orientation de la piste pour le curseur. Uniquement dans Firefox.
results Le nombre maximum de résultats qui devraient être affichés dans une liste déroulante affichant les recherches précédentes. Uniquement dans Safari.
webkitdirectory Un booléen indiquant s'il est possible de choisir un répertoire (ou plusieurs répertoires si multiple est également présent).
autocorrect Non-standard

(Safari uniquement). Une chaîne de caractères qui indique si la correction automatique doit être activée lors de l'édition manuelle du champ. Les valeurs autorisées pour cet attribut sont :

on

La correction automatique des fautes et le traitement des substitutions de texte (si elles sont configurées) sont activées.

off

La correction automatique et les substitutions de texte sont désactivées.

incremental Non-standard

Cet attribut booléen est une extension de WebKit et Blink (présent donc dans les navigateurs Safari, Opera, Chrome, etc.) qui indique, s'il est présent, que le champ doit être traité comme un champ de recherche dynamique. Lorsque la personne édite la valeur du champ, l'agent utilisateur envoie des évènements search à l'objet HTMLInputElement qui représente le champ de recherche. Cela permet de gérer, via du code, la mise à jour des résultats de recherche en temps réel lors de l'édition.

Si incremental n'est pas indiqué, l'évènement search est uniquement envoyé lorsque la personne initie explicitement une recherche, c'est-à-dire en appuyant sur la touche Entrée ou Retour lors de l'édition du champ.

L'évènement search est soumis à des limites de fréquence propres à chaque implémentation.

orient Non-standard

Semblable à la propriété CSS non-standard -moz-orient pour les éléments <progress> et <meter>, cet attribut définit l'orientation de la piste du curseur. Les valeurs possibles pour cet attribut sont horizontal (la piste est affichée horizontalement) et vertical (la piste est affichée verticalement).

results Non-standard

Uniquement pris en charge par Safari, cet attribut est une valeur numérique qui permet de surcharger le nombre de résultats à afficher dans la liste des suggestions de l'élément <input> à partir des requêtes précédentes. Sa valeur doit être un nombre positif. Si aucune valeur n'est indiquée ou qu'une valeur invalide est fournie, c'est le nombre d'options maximum par défaut du navigateur qui est utilisé.

webkitdirectory Non-standard

Un attribut booléen qui, lorsqu'il est présent, indique que seuls les répertoires peuvent être sélectionnés via le sélecteur de fichier. Voir HTMLInputElement.webkitdirectory pour plus de détails et d'exemples. Bien qu'originalement implémenté uniquement par les navigateurs WebKit, webkitdirectory est également utilisable avec Microsoft Edge et Firefox 50 (ou ultérieur). Toutefois, malgré cette prise en charge assez large, il n'est toujours pas standard et ne devrait pas être utilisé à moins qu'il n'y ait aucune autre alternative.

Méthodes

Les méthodes suivantes sont fournies par l'interface HTMLInputElement qui représente les éléments <input> dans le DOM. Les méthodes des interfaces parentes HTMLElement, Element, Node, et EventTarget sont également disponibles.

checkValidity()

Renvoie true si la valeur de l'élément respecte les conditions de validité, false sinon et, dans ce dernier cas, déclenche un évènement invalid sur l'élément.

reportValidity()

Renvoie true si la valeur de l'élément respecte les conditions de validité, false sinon et, dans ce dernier cas, déclenche un évènement invalid sur l'élément et, si l'évènement n'est pas annulé, rapporte ce problème à l'utilisatrice ou l'utilisateur.

select()

Sélectionne tout le contenu de l'élément <input> sous réserve que son contenu soit sélectionnable. Pour les éléments qui n'ont pas de contenu texte qui puisse être sélectionné (par exemple un sélecteur de couleur ou un calendrier), cette méthode n'a pas d'effet.

setCustomValidity()

Définit un message particulier à afficher si la valeur de l'élément n'est pas valide.

setRangeText()

Modifie le contenu de la valeur entre deux positions de caractères par une nouvelle chaîne de caractères. Un paramètre selectMode permet de contrôler la façon dont le contenu existant est affecté.

setSelectionRange()

Sélectionne un intervalle de caractères dans un champ texte. Cette méthode n'a pas d'effet pour les champs qui ne sont pas des champs texte.

showPicker()

Affiche le sélecteur fourni par le navigateur, qui s'affiche normalement quand l'élément est sélectionné. Cela permet de déclencher son affichage à partir d'un bouton ou d'une autre interaction.

stepDown()

Décrémente la valeur d'un champ numérique d'un nombre indiqué d'unités (1 par défaut).

stepUp()

Incrément la valeur d'un champ numérique d'un nombre indiqué d'unités (1 par défaut).

CSS

Les champs de formulaire sont des éléments remplacés et disposent de quelques fonctionnalités qui ne sont pas applicables aux éléments qui ne sont pas des éléments de formulaire. Certains sélecteurs CSS permettent de cibler spécifiquement les contrôles en fonction de l'interface utilisateur : ce sont les pseudo-classes d'interface utilisateur. Un élément <input> peut également être ciblé via son type grâce aux sélecteurs d'attribut. Certaines propriétés CSS sont également utiles pour ces éléments.

Pseudo-classes d'interface utilisateur

Pseudo-classes pertinentes pour l'élément <input>
Pseudo-classe Description
:enabled S'applique à tout élément actif (qui peut faire l'objet d'une sélection de texte, d'un clic, d'une saisie de texte, etc.) ou accepter le focus.
:disabled S'applique à tout élément désactivé (dont le texte ne peut pas être sélectionné, qui ne peut pas recevoir de clic ou de saisie de texte) ou qui ne peut pas recevoir le focus.
:read-only S'applique aux éléments qui ne peuvent pas être édités par l'utilisatrice ou l'utilisateur.
:read-write S'applique aux éléments éditables.
:placeholder-shown S'applique aux éléments qui affichent actuellement le texte fourni par l'attribut placeholder, y compris les éléments <input> et <textarea> avec un attribut placeholder présent mais sans valeur pour le moment.
:default S'applique aux éléments de formulaire qui sont les options par défaut parmi les groupes d'éléments associés entre eux. Correspond aux éléments <input type="checkbox"> et <input type="radio"> qui sont cochés/sélectionnés au chargement de la page.
checked S'applique aux éléments <input type="checkbox"> et <input type="radio"> qui sont actuellement cochés (et à l'élément <option> sélectionné d'un élément <select>).
:indeterminate S'applique aux éléments <input type="checkbox"> dont la propriété indeterminate est fixée à true en JavaScript, aux éléments <input type="radio"> lorsque tous les boutons radio d'un groupe sous décochés, et aux éléments <progress> dans un état indéterminé.
:valid S'applique aux contrôles de formulaire concernés par les contraintes de validation et qui sont actuellement valides.
:invalid S'applique aux contrôles de formulaire concernés par les contraintes de validation et qui sont actuellement invalides. Cible un contrôle de formulaire dont les valeurs ne respectent pas les contraintes imposées par ses attributs comme required, pattern, step, et max.
:in-range S'applique aux champs non vides dont la valeur actuelle est située dans les limites d'intervalle définies par les attributs min et max et suit le pas décrit par l'attribut step.
:out-of-range S'applique aux champs non vides dont la valeur actuelle est située en dehors des limites d'intervalle définies par les attributs min et max ou qui ne respecte pas la contrainte de granularité dictée par l'attribut step.
:required S'applique aux éléments <input>, <select> ou <textarea> qui ont l'attribut required. Seuls les éléments qui peuvent effectivement être obligatoires sont ciblés. Utiliser l'attribut required sur un élément qui ne peut pas devneir obligatoire n'aura aucun effet.
:optional S'applique aux éléments <input>, <select> ou <textarea> qui n'ont pas l'attribut required. Les éléments qui ne peuvent pas être obligatoires ne sont pas ciblés.
:blank S'applique aux éléments <input> ou <textarea> qui n'ont pas de valeur actuellement.
:user-invalid Semblable à :invalid, mais ne s'applique aux champs invalides qu'après une interaction utilisateur (par exemple le passage du focus, la sortie du contrôle ou une tentative d'envoi du formulaire avec le contrôle invalide).

Exemple d'utilisation des pseudo-classes

On peut mettre en forme le libellé d'une case à cocher selon que la case est cochée ou non. Dans cet exemple, on adapte les propriétés color et font-weight de l'élément <label> situé immédiatement après une case cochée. On applique aucune mise en forme si l'élément <input> n'est pas coché.

css
input:checked + label {
  color: red;
  font-weight: bold;
}

Sélecteurs d'attribut

Il est possible de cibler différents types de contrôles en fonction de la valeur de leur attribut type grâce aux sélecteurs d'attribut. Les sélecteurs d'attribut CSS permettent de cibler des éléments en fonction de la présence ou de la valeur d'un attribut donné.

css
/* Cible un champ de saisie d'un mot de passe */
input[type="password"] {
}

/* Cible un contrôle de formulaire dont l'intervalle des valeurs valides est délimité par attributs */
input[min][max] {
}

/* Cible un contrôle de formulaire utilisant un attribut pattern */
input[pattern] {
}

::placeholder

Par défaut, l'affichage du texte de l'attribut placeholder se fait en transparence ou avec un gris clair. Le pseudo-élément ::placeholder permet de cibler le texte de cet attribut et peut être mis en forme avec un sous-ensemble de propriétés CSS.

css
::placeholder {
  color: blue;
}

Seul le sous-ensemble des propriétés CSS qui s'appliquent au pseudo-élément ::first-line peuvent être utilisées dans une règle qui utilise ::placeholder comme sélecteur.

appearance

La propriété appearance permet d'afficher presque tous les éléments en utilisant le style natif fourni par le thème du système d'exploitation, ou de retirer ce style natif si on utilise la valeur none.

En théorie, on peut donc faire ressembler un élément <div> à un bouton radio grâce à div {appearance: radio;} ou faire ressembler un bouton radio à une case à cocher avec [type="radio"] {appearance: checkbox;}. En réalité, il s'agit de mauvaises pratiques, à éviter donc.

Utiliser appearance: none permettra de retirer les bordures liées à la plateforme mais pas les fonctionnalités.

caret-color

caret-color est une propriété qui s'applique aux éléments permettant de saisir du texte et qui permet de personnaliser la couleur du curseur de saisie :

HTML

html
<label for="textInput">Vous noterez le curseur rouge :</label>
<input id="textInput" class="custom" size="32" />

CSS

css
input.custom {
  caret-color: red;
  font:
    16px "Helvetica",
    "Arial",
    "sans-serif";
}

Résultat

object-position et object-fit

Dans certains cas (le plus souvent pour les champs non-texte et les interfaces spécialisées), l'élément <input> est un élément remplacé. Lorsque c'est le cas, la taille et la position de l'élément au sein de son cadre peuvent être ajustées grâce aux propriétés CSS object-position et object-fit.

Mise en forme

Fonctionnalités supplémentaires

Libellés

Les libellés permettent d'associer les textes explicatifs aux éléments <input>. Utiliser un élément <label> pour fournir des informations explicatives quant à un champ de formulaire est toujours une bonne chose (quel que soit le sujet de mise en forme qui vient après). Ce n'est jamais une mauvaise idée que d'utiliser un élément <label> pour expliquer ce qui doit être saisi dans un élément <input> ou <textarea>.

Rattachement des libellés

Le rattachement sémantique entre les éléments <input> et <label> est utile aux outils d'assistance comme les lecteurs d'écran. En les associant grâce à l'attribut for des éléments <label>, on lie le libellé au contrôle de formulaire d'une façon qui permet aux lecteurs d'écran de décrire les champs du formulaire plus précisément.

Il ne suffit pas d'avoir un texte normal à côté de l'élément <input>. Pour l'utilisabilité et l'accessibilité, on associera un libellé avec <label> de façon implicite ou explicite :

html
<!-- inaccessible -->
<p>Veuillez saisir votre nom : <input id="name" type="text" size="30" /></p>

<!-- libellé implicite -->
<p>
  <label
    >Veuillez saisir votre nom : <input id="name" type="text" size="30"
  /></label>
</p>

<!-- libellé explicite -->
<p>
  <label for="name">Veuillez saisir votre nom : </label
  ><input id="name" type="text" size="30" />
</p>

Le premier exemple est inaccessible : il n'y a aucune relation entre la consigne de saisie et l'élément <input>.

En plus d'un nom accessible, un élément <label> permet d'agrandir la zone d'interaction à la souris ou via la surface tactile sur laquelle on peut cliquer/toucher. En associant un élément <label> avec un élément <input>, si on clique sur l'un des deux, cela passera le focus au contrôle porté par l'élément <input>. Si on utilise du texte simple plutôt qu'un élément sémantique, on n'aura pas ces bénéfices. Agrandir la zone d'activation du contrôle aide les personnes avec un handicap moteur.

En développant sur le Web, il est important de ne pas présupposer que tout le monde connaît tout sur le Web. La diversité des personnes qui utilisent le Web, et donc votre site ou application, garantit à coup sûr que quelqu'un d'autre peut interpréter un formulaire différemment si ce dernier ne contient pas de libellés clairs et bien associés.

Les textes d'indications (placeholder) ne sont pas accessibles

L'attribut placeholder permet d'indiquer un texte qui apparaît dans la zone du contenu de l'élément <input> lorsqu'il est vide. Ce texte indicatif ne devrait jamais être strictement nécessaire à la compréhension du formulaire. Il ne s'agit pas d'un libellé et on ne devrait pas utiliser cet attribut comme un remplacement d'un libellé. placeholder permet de fournir une indication de ce à quoi la valeur à saisir devrait ressembler, il ne s'agit ni d'une explication ni d'une consigne.

Le texte fourni par placeholder n'est pas accessible pour les lecteurs d'écran et dès que la personne saisit une valeur, ou si le contrôle a déjà une valeur, il disparaît. Les navigateurs qui ont une fonctionnalité de traduction automatique pourraient ignorer les attributs lors de la traduction, ce qui signifie que placeholder pourrait ne pas être traduit.

Note : Évitez d'utiliser placeholder si vous pouvez. Pour ajouter un libellé sur un élément <input>, on utilisera l'élément <label>.

Validation côté client

Attention : La validation côté client est utile mais ne garantit pas que le serveur reçoit des données valides. Si les données doivent respecter un format donné, il faudra toujours les vérifier côté serveur et renvoyer une réponse HTTP 400 si le format est invalide.

En complément des pseudo-classes CSS :valid et :invalid qui permettent de cibler les contrôles selon leur état de validité, le navigateur fournit une validation côté client pour chaque tentative d'envoi du formulaire. À l'envoi du formulaire, si un des contrôles échoue à respecter les contraintes, les navigateurs qui implémentent cette fonctionnalité afficheront un message d'erreur sur le premier contrôle du formulaire qui est invalide, le message pouvant être un message par défaut selon le type d'erreur ou un message choisi par le site.

Certains types de champ et attributs imposent des limites aux valeurs possibles pour un champ donné. Ainsi, <input type="number" min="2" max="10" step="2"> signifiera que seuls les nombres 2, 4, 6, 8, et 10 sont valides. Plusieurs erreurs de validation peuvent se produire ici, rangeUnderflow si la valeur est inférieure à 2, rangeOverflow si elle est supérieure à 10, stepMismatch si la valeur est comprise entre 2 et 10, mais n'est pas un entier pair (autrement dit, la contrainte imposée par step n'est pas respectée), ou typeMismatch si la valeur n'est pas un nombre.

Pour les types de champ dont le domaine des valeurs possibles est périodique (autrement dit après avoir atteint la plus grande valeur, on revient à la plus petite), il est possible d'avoir des valeurs d'attribut max inférieures à celles de min. Cela est particulièrement utile pour les dates et les heures, par exemple pour autoriser les heures entre 8h du soir et 8h du matin :

html
<input type="time" min="20:00" max="08:00" name="overnight" />

Certains attributs et valeurs peuvent causer une erreur ValidityState spécifique :

Objets d'erreur de validité selon les attributs <input> et leurs valeurs
Attribut Propriété correspondante Description
max validityState.rangeOverflow Se produit lorsque la valeur est supérieure à la valeur maximale définie par l'attribut max.
maxlength validityState.tooLong Se produit lorsque le nombre de caractères du champ est supérieur à la valeur définie par l'attribut maxlength.
min validityState.rangeUnderflow Se produit lorsque la valeur est inférieure à la valeur minimale définie par l'attribut min.
minlength validityState.tooShort Se produit lorsque le nombre de caractères du champ est inférieur à la valeur définie par l'attribut minlength.
pattern validityState.patternMismatch Se produit lorsque l'attribut pattern contient une expression rationnelle valide et que la valeur du champ ne respecte pas celle-ci.
required validityState.valueMissing Se produit lorsque l'attribut required est présent et mais sa valeur est null ou que le bouton radio ou la case à cocher n'est pas sélectionné.
step validityState.stepMismatch Se produit lorsque la valeur ne respecte pas l'incrément imposé par l'attribut step. L'incrément par défaut vaut 1, ce qui signifie que seules les valeurs entières sont valides pour le type number si step est absent. Utiliser step="any" empêchera de déclencher cette erreur.
type validityState.typeMismatch Se produit lorsque la valeur ne correspond pas au type, par exemple si une adresse électronique ne contient pas le caractère @ ou si une URL ne contient pas de protocole.

Si un contrôle de formulaire n'a pas d'attribut required, n'a aucune valeur, ou s'il a une chaîne de caractères de vide comme valeur, il n'est pas invalide. Même si les attributs précédents sont présents, exception faite de required, une chaîne de caractères vide ne causera pas d'erreur.

On peut définir des limites sur les valeurs acceptables et les navigateurs qui implémentent les fonctionnalités de validation effectueront un contrôle nativement en alertant la personne qu'il y a un problème lors de l'envoi du formulaire.

En plus des erreurs décrites dans le tableau qui précède, l'interface validityState contient les propriétés booléennes en lecture seule badInput, valid, et customError. Cet objet possède les propriétés suivantes :

Pour chacune de ces propriétés booléennes, une valeur à true indique que la raison de validation correspondante peut avoir échoué, exception faite de la propriété valid qui, si elle vaut true, indique que la valeur de l'élément respecte l'ensemble des contraintes.

S'il y a une erreur, les navigateurs qui prennent en charge la validation avertiront la personne et empêcheront l'envoi du formulaire. Attention à un point : si un message d'erreur personnalisé a une valeur équivalente à true (toute valeur qui n'est ni la chaîne vide ni null), le formulaire ne pourra pas être envoyé. S'il n'y a pas de message d'erreur personnalisé et qu'aucune des propriétés précédentes ne vaut true à part valid, le formulaire pourra être envoyé.

js
function validate(input) {
  let validityState_object = input.validity;
  if (validityState_object.valueMissing) {
    input.setCustomValidity("Une valeur est nécessaire.");
  } else if (validityState_object.rangeUnderflow) {
    input.setCustomValidity("La valeur est trop basse.");
  } else if (validityState_object.rangeOverflow) {
    input.setCustomValidity("La valeur est trop haute.");
  } else {
    input.setCustomValidity("");
  }
}

La dernière ligne, qui utilise la chaîne vide comme valeur pour le message d'erreur est essentielle. Si la personne fait une erreur et que la validité est définie, le formulaire ne pourra être envoyé, même si toutes les valeurs sont valides, jusqu'à ce que le message soit null.

Exemple de message d'erreur de validation sur mesure

Si vous souhaitez afficher un message d'erreur spécifique lorsqu'un champ est invalide, vous devrez utiliser les fonctionnalités relatives à la validation des contraintes disponible sur les éléments <input> (entre autres). Prenons le formulaire suivant :

html
<form>
  <label for="name"
    >Veuillez saisir un nom d'utilisateur (avec des lettres en minuscules ou
    majuscules) :
  </label>
  <input type="text" name="name" id="name" required pattern="[A-Za-z]+" />
  <button>Envoyer</button>
</form>

Les fonctionnalités HTML de base pour la validation des formulaires permettront d'afficher un message d'erreur par défaut si on tente de soumettre le formulaire sans valeur ou avec une valeur qui ne respecte pas le motif de l'expression rationnelle indiquée avec pattern.

Si on souhaite afficher un message d'erreur spécifique, on pourra utiliser JavaScript comme suit :

js
const nameInput = document.querySelector("input");

nameInput.addEventListener("input", () => {
  nameInput.setCustomValidity("");
  nameInput.checkValidity();
});

nameInput.addEventListener("invalid", () => {
  if (nameInput.value === "") {
    nameInput.setCustomValidity(
      `Veuillez saisir un nom d'utilisateur non vide !`,
    );
  } else {
    nameInput.setCustomValidity(
      `Un nom d'utilisateur ne peut contenir que des lettres en minuscules ou majuscules. Essayez à nouveau.`,
    );
  }
});

L'exemple ainsi construit produira le résultat suivant :

En résumé :

  • On vérifie l'état de validité du champ chaque fois que sa valeur est modifiée en exécutant la méthode checkValidity() lors de l'évènement input via le gestionnaire d'évènement.
  • Si la valeur est invalide, un évènement invalid est déclenché et la fonction indiquée sur le gestionnaire d'évènement pour invalid est exécutée. Au sein de cette fonction, on détermine si la valeur est invalide parce qu'elle est vide ou parce qu'elle ne correspond pas au motif imposé en distinguant le cas avec un bloc if() et en adaptant le message d'erreur selon le cas de figure.
  • Ainsi, si la valeur du champ est invalide lorsqu'on clique sur le bouton d'envoi, un des messages spécifiques est affiché.
  • Si la valeur est valide, le formulaire est envoyé sans problème. Pour cela, il faut annuler la vérification de validité spécifique en appelant setCustomValidity() avec une chaîne de caractères vide. C'est ce qu'on fait à chaque fois qu'un évènement input est déclenché. Sans ça, si une validité spécifique avait précédemment été définie, le champ serait toujours considéré comme invalide, même si la valeur courante était valide lors de l'envoi.

Note : On veillera à toujours valider les contraintes côté client et côté serveur. La validation des contraintes du navigateur ne se substitue pas à la vérification côté serveur. En effet, des valeurs invalides peuvent toujours être envoyées par des navigateurs obsolètes ou par des acteurs malveillants.

Localisation

Les valeurs autorisées à la saisie pour certains types d'<input> dépendent de la locale. En effet, pour certaines locales 1,000.00 représente un nombre valide tandis qu'il faudrait saisir 1000,00 dans d'autres locales.

Firefox utilise les heuristiques suivantes pour déterminer la locale selon laquelle valider la saisie (au moins pour type="number") :

  • Tente d'utiliser la langue indiquée par l'attribut lang/xml:lang sur l'élément ou l'un de ses parents,
  • Sinon, utilise la langue indiquée par l'en-tête HTTP Content-Language,
  • Sinon, utilise la locale du navigateur.

Résumé technique

Catégories de contenu Contenu de flux, contenu associé aux formulaires : listé, participant à l'envoi du formulaire, réinitialisable, contenu phrasé. Si l'attribut type ne vaut pas hidden, il s'agit d'un élément étiquetable et d'un contenu tangible.
Contenu autorisé Aucun, il s'agit d'un élément vide.
Omission de balises Cet élément doit avoir une balise ouvrante et pas de balise fermante.
Parents autorisés Tout élément qui accepte du contenu phrasé.
Rôle ARIA implicite
Rôles ARIA autorisés
Interface du DOM correspondante HTMLInputElement

Accessibilité

Libellés

Lorsqu'on ajoute des champs de formulaire sur une page, le minimum, en termes d'accessibilité, consiste à ajouter des libellés correspondants avec des éléments <label>. Cela permet aux outils d'assistance d'indiquer le rôle du champ. De plus, cliquer ou toucher le libellé permettra de passer le focus au contrôle de formulaire correspondant. Cela améliore l'accessibilité et l'utilisabilité pour les personnes voyantes, en augmentant la zone d'interaction possible pour activer le contrôle du formulaire au clic ou au toucher. C'est notamment utile (voire nécessaire) pour les boutons radios et les cases à cocher dont la surface est faible. Pour plus d'informations sur les libellés en général, voir la section sur les libellés.

Dans l'exemple qui suit, on illustre comment associer un élément <label> avec un élément <input>. Le lien se fait avec la valeur l'attribut id de l'élément <input> qui est réutilisée comme valeur pour l'attribut for de l'élément <label>.

html
<label for="ptipois">Est-ce que vous aimez les petits pois ?</label>
<input type="checkbox" name="petitspois" id="ptipois" />

Dimensionnement

Les éléments interactifs d'une page web, tels que les champs de formulaire, doivent fournir une zone d'interaction suffisamment large pour qu'il soit facile de les activer. Cela aide les personnes avec des handicaps moteurs et aussi les personnes qui utilisent des dispositifs de pointage peu précis comme les doigts ou un stylet. Une surface interactive minimale de 44×44 pixels CSS est recommandée.

Spécifications

Specification
HTML Standard
# the-input-element

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi