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

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.

<input type="button" name="button" value="Button" />

<input type="checkbox" name="checkbox"/>

<input type="color" name="color"/>

<input type="date" name="date"/>

<input type="datetime-local" name="datetime-local"/>

<input type="email" name="email"/>

<input type="file" accept="image/*, text/*" name="file"/>

<input id="userId" name="userId" type="hidden" value="abc123">

<input type="image" name="image" src="" alt="image input"/>

<input type="month" name="month"/>

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

<input type="password" name="password"/>

<input type="radio" name="radio"/>

<input type="range" name="range" min="0" max="25"/>

<input type="reset" name="reset"/>

<input type="search" name="search"/>

<input type="submit" name="submit"/>

<input type="tel" name="tel"/>

<input type="text" name="text"/>

<input type="time" name="time"/>

<input type="url" name="url"/>

<input type="week" name="week"/>

<input type="datetime" name="datetime"/>

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 :

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

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">.

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 (en-US). 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 (en-US) 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 (en-US). 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 (en-US) 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 :

1. _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.
2. 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

Cet attribut est une expression rationnelle que la valeur du champ doit respecter afin de valider les contraintes (en-US). 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 (en-US) 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

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.

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érique (number, dates/heures, 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.

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.

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 (en-US) à 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 (en-US) 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 (en-US) 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.

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 (en-US) sur l'élément.

reportValidity() (en-US)

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 (en-US) sur l'élément et, si l'évènement n'est pas annulé, rapporte ce problème à l'utilisatrice ou l'utilisateur.

select() (en-US)

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() (en-US)

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

setRangeText() (en-US)

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() (en-US)

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.

stepDown() (en-US)

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

stepUp() (en-US)

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

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.

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é.

<input id="checkboxInput" type="checkbox" />
<label for="checkboxInput">Activer/désactiver la case à cocher</label>

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

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é.

/* 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] {
}

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.

::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.

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 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

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

CSS

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

Résultat

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.

Pour plus d'informations sur l'ajout de couleurs aux éléments HTML, voir :

• Appliquer des couleurs aux éléments HTML en utilisant CSS.

Voir également :

• Mettre en forme les formulaires HTML
• Mise en forme avancée des formulaires HTML
• Tableau de compatibilité des propriétés CSS pour les contrôles de formulaire.

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 :

<!-- 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.

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 :

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

Certains attributs et valeurs peuvent causer une erreur ValidityState (en-US) spécifique :

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 :

• validityState.valueMissing (en-US)
• validityState.typeMismatch (en-US)
• validityState.patternMismatch (en-US)
• validityState.tooLong (en-US)
• validityState.tooShort (en-US)
• validityState.rangeUnderflow (en-US)
• validityState.rangeOverflow (en-US)
• validityState.stepMismatch (en-US)
• validityState.badInput (en-US)
• validityState.valid
• validityState.customError

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é.

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 (en-US) disponible sur les éléments <input> (entre autres). Prenons le formulaire suivant :

<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 :

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.

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.

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>.

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

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.

• Comprendre le critère de réussite 2.5.5 : taille de la cible, Guide du W3C pour la compréhension de WCAG 2.1 (en anglais)
• Taille de la cible et 2.5.5, billet de blog d'Adrian Roselli (en anglais)
• Test rapide : cibles suffisamment grande, le projet A11Y (en anglais)

• Validation des contraintes dans un formulaire (en-US)
• Votre premier formulaire HTML
• Comment structurer un formulaire HTML
• Les contrôles de formulaire natifs
• Envoyer des données de formulaire
• Validation des données d'un formulaire
• Comment construire des contrôles sur mesure
• Les formulaires HTML dans les navigateurs historiques
• Mise en forme d'un formulaire HTML
• Mise en forme avancée d'un formulaire HTML
• Tableau de compatibilité des propriétés CSS