<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'attributsrc
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 champhidden
,text
,search
,url
,tel
,email
,date
,month
,week
,time
,datetime-local
,number
,range
,color
, etpassword
. 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 decheckbox
,radio
,file
, ou des types de bouton. Voir la page de l'attribut HTMLautocomplete
pour plus d'informations, y compris sur la sécurité des mots de passe et sur la façon dontautocomplete
s'applique légèrement différemment pour les champs de typehidden
. 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ènementDOMContentLoaded
.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 typehidden
, 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
etcheckbox
. Lorsqu'il est présent sur un contrôle de typeradio
, 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 typecheckbox
, 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 IDLHTMLInputElement.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
vautfruit
et dont l'attributvalue
vautcerise
, si la case est cochée, les données envoyées avec le formulaire contiendrontfruit=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'attributvalue
eston
. dirname
-
Cet attribut, uniquement valide pour les types
text
etsearch
, 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 dename
etvalue
, et la seconde composée de la valeur dedirname
comme nom et deltr
ourtl
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 avecfruit=cerise
etdirname
/sens d'écriture d'autre part avecfruit.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'attributautocomplete
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'attributid
) 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
etsubmit
. Voir la page détaillée sur<input type="submit">
. formenctype
-
Uniquement valide pour les types
image
etsubmit
. Voir la page détaillée sur<input type="submit">
. formmethod
-
Uniquement valide pour les types
image
etsubmit
. Voir la page détaillée sur<input type="submit">
. formnovalidate
-
Uniquement valide pour les types
image
etsubmit
. Voir la page détaillée sur<input type="submit">
. formtarget
-
Uniquement valide pour les types
image
etsubmit
. 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'attributfor
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
, etsearch
. list
-
La valeur fournie à l'attribut
list
doit être l'identifiant (l'attributid
) 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'attributtype
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
, etcolor
.Selon la spécification, l'attribut
list
n'est pas pris en charge pour les typeshidden
,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
, etrange
, 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'attributmax
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 demin
, 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
, etpassword
, 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 demaxlength
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 deminlength
.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'attributmaxlength
. 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
, etrange
, 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'attributmin
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'attributmin
est présent mais sans valeur ou avec une valeur invalide, aucune contrainte de minimum n'est appliquée. Si l'attributmin
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 demin
, 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
, etpassword
, 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 demaxlength
. 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 typehidden
, 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 nomisindex
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 attributname
, ce nom devient une propriété de l'objetHTMLFormElement.elements
associé au formulaire propriétaire. Ainsi, si on a un champ dont le nom estinvite
et un autre dont le nom esttaille-chat
, on pourra manipuler les données du formulaire en JavaScript comme suit :jslet form = document.querySelector("form"); let nomInvite = form.elements.invite; let tailleChat = form.elements["taille-chat"];
À l'exécution de ce code,
nomInvite
correspondra à l'objetHTMLInputElement
associé au champinvite
, et de même l'objettailleChat
correspondra à l'objet du DOM associé au champ avec le nomtaille-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 (voirRegExp
) 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 depattern
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 attributtitle
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 partitle
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
, etnumber
, 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
, etpassword
.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
, etfile
.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
ettext
. 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é CSSwidth
. L'unité de cette valeur dépend du type de contrôle. Pour les champs de typepassword
ettext
, il s'agit du nombre de caractères (équivalent à l'unitéem
) et la valeur par défaut vaut20
. 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
, etrange
). L'attributstep
est un nombre qui définit la granularité de la valeur.S'il n'est pas explicitement inclus :
- Pour les types
number
etrange
, 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
, etweek
.
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 parmin
etmax
s'appliquent toujours)).Si
any
n'est pas utilisé explicitement, les valeurs valides du champ pour les types temporels,number
, etrange
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. Sistep
est absent, par exemple avec<input type="number">
, tous les nombres entiers seront valides mais les nombres décimaux (comme4.2
) seront invalides, car la valeur par défaut destep
vaut1
pour le typenumber
. Afin que4.2
soit valide, on devra utiliser la valeurany
, ou0.1
, ou0.2
pour l'attributstep
, ou encore une valeur demin
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.
- Pour les types
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 attributfor
dont la valeur correspond à la valeur de l'attributid
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 typetext
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 champcheckbox
,radio
, ethidden
. 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 |
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 :
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'objetHTMLInputElement
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ènementsearch
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 sonthorizontal
(la piste est affichée horizontalement) etvertical
(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ènementinvalid
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ènementinvalid
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-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é.
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é.
/* 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.
::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
<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
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
Pour plus d'informations sur l'ajout de couleurs aux éléments HTML, voir :
Voir également :
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 :
<!-- 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 :
<input type="time" min="20:00" max="08:00" name="overnight" />
Certains attributs et valeurs peuvent causer une erreur ValidityState
spécifique :
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 :
validityState.valueMissing
validityState.typeMismatch
validityState.patternMismatch
validityState.tooLong
validityState.tooShort
validityState.rangeUnderflow
validityState.rangeOverflow
validityState.stepMismatch
validityState.badInput
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 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ènementinput
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 pourinvalid
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 blocif()
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ènementinput
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>
.
<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
- Validation des contraintes dans un formulaire
- 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