MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

L'élément HTML <input> est utilisé pour créer un contrôle interactif dans un formulaire web qui permet à l'utilisateur de saisir des données. Les saisies possibles et le comportement de l'élément  <input> dépend fortement de la valeur indiquée dans son attribut type.

Catégories de contenu Contenu de flux, contenu de formulaire (listé, envoyable, réinitialisable), contenu phrasé. Si l'attribut type ne vaut pas hidden, c'est un élément étiquetable et tangible.
Contenu autorisé Aucun, cet élément est un élément vide.
Omission de balises Cet élément doit avoir une balise de début et ne pas avoir de balise de fin.
Parents autorisés Tout élément qui accepte du contenu phrasé.
Rôles ARIA autorisés
Interface DOM HTMLInputElement

Attributs

À l'instar des autres éléments HTML, cet élément inclut les attributs universels.

type
Le type du contrôle de saisie. La valeur par défaut, utilisée lorsqu'aucune valeur n'est fournie est text.
  • button : un bouton sans comportement par défaut.
  • checkbox : une case à cocher. L'attribut value doit être utilisé pour définir la valeur correspondante à l'élément. L'attribut checked est utilisé pour indiquer que l'élément est sélectionné. L'attribut indeterminate peut également être utilisé afin d'indiquer que la case à cocher est dans un état indéterminé (sur la plupart des plateforms, la case sera représentée avec une ligne horizontale).
  • color : HTML5 un contrôle permettant de choisir une couleur. L'interface utilisateur a pour seule contrainte de renvoyer la couleur exprimée sous la forme d'un texte (plus de détails).
  • date : HTML5 un contrôle qui permet de saisir une date (sans heure).
  • datetime : HTML5 un contrôle qui permet de saisir une date et une heure selon le fuseau horaire UTC. Cette fonctionnalité a été retirée du WHATWG HTML.
  • datetime-local : HTML5 un contrôle qui permet de saisir une date et une heure, sans fuseau horaire associé.
  • email : HTML5 un champ qui permet d'éditer une adresse email. La valeur saisie est validée lorsqu'elle contient la chaîne vide ou une adresse email valide. Les pseudo-classes CSS :valid et :invalid sont appliquées lorsque c'est nécessaire.
  • file : un contrôle qui permet à l'utilisateur de sélectionner un fichier. L'attribut accept peut être utilisé pour définir les types de fichier que le contrôle permet de sélectionner.
  • hidden : un contrôle qui n'est pas affiché mais dont la valeur est envoyée au serveur.
  • image : un bouton d'envoi avec une image. L'attribut src doit être utilisé pour définir la source de l'image et l'attribut alt doit être utilisé afin de fournir un texte alternatif. Les attributs height et width peuvent être utilisés afin de définir les dimensions de l'image en pixels.
  • month : HTML5 un contrôle qui permet de saisir un mois et une année, sans fuseau horaire.
  • number : HTML5 un contrôle qui permet de saisir un nombre décimal.
  • password : un champ de saisie sur une seule ligne dont la valeur est masquée. Ce champ est destiné à la saisie d'un mot de passe. L'attribut maxlength peut être utilisé afin de définir la longueur maximale de la valeur qui peut être saisie.
    Note : Les formulaires utilisés pour manipuler des informations sensibles (telles que des mots de passes et autres informations de connexion) doivent être servis via HTTPS. Firefox implémente désormais différents mécanismes pour prévenir les utilisateurs lorsqu'ils utilisent des formulaires non-sécurisés (cf. cet article sur la sécurité des mots de passe). Les autres navigateurs implémentent également des mesures similaires.
  • radio : un bouton radio. L'attribut value doit alors être utilisé pour définir la valeur associé à cet élément. L'attribut checked peut être employé afin d'indiquer que l'élément est sélectionné par défaut. Si plusieurs boutons radio ont le même attribut name, ils appartiendront au même groupe. Pour un groupe donné, seul un bouton radio peut être sélectionné à un instant donné.
  • range : HTML5 un contrôle qui permet de saisir un nombre dont la valeur exacte n'est pas importante. Ce type de contrôle utilise les valeurs par défaut suivantes lorsque les attributs correspondants ne sont pas définis :
    • min : 0
    • max : 100
    • value : min + (max - min) / 2, ou min si max est inférieur à min
    • step : 1
  • reset : un bouton qui permet de réinitialiser le contenu des éléments du formulaire avec leurs valeurs par défaut.
  • search : HTML5 un champ de texte sur une seule ligne qui permet de saisir des requêtes de recherche. Les sauts de ligne sont automatiquement supprimés de la valeur saisie.
  • submit : un bouton qui envoie le formulaire.
  • tel : HTML5 un contrôle qui permet de saisir un numéro de téléphone. Les sauts de ligne sont automatiquement supprimés de la valeur saisie, il n'y a pas d'autre règle de validation syntaxique automatique. Les attributs pattern et maxlength peuvent être utilisés afin de restreindre les valeurs qui peuvent être saisies dans le contrôle. Les pseudo-classes CSS :valid et :invalid seront alors appliquées selon les cas de figure.
  • text : un champ de texte sur une seule ligne. Les sauts de ligne sont automatiquement retirés de la valeur saisie.
  • time : HTML5 un contrôle qui permet de saisir une valeur pour une heure, sans fuseau horaire associé.
  • url : HTML5 un champ qui permet d'éditer une URL. La valeur saisie est valide si c'est la chaîne de caractères vide ou si c'est une URL absolue valide. Les attributs pattern et maxlength peuvent être utilisés afin de restreindre les valeurs qui peuvent être saisies. Les pseudo-classes CSS :valid et :invalid seront alors appliquées selon les cas de figure.
  • week : HTML5 un contrôle qui permet de saisir une semaine sous la forme d'un numéro de semaine, sans fuseau horaire associé.
accept
Si l'attribut type vaut file, cet attribut indiquera les types de fichier acceptés par le serveur (pour les autres types, cet attribut sera ignoré). La valeur de cet attribut est une liste de descripteurs de format uniques, séparés par des virgules. Un descripteur de format peut prendre l'une de ces formes :
  • Une extension de fichier précédée d'un point (plus précisément le caractère STOP character (U+002E)), par exemple : .jpg, .png, .doc
  • Un type MIME valide sans extension
  • audio/* qui permet de représenter les fichiers audio HTML5
  • video/* qui permet de représenter les fichiers vidéo HTML5
  • image/* qui permet de représenter les fichiers image HTML5
mozactionhint
Cet attribut permet de définir une indication pour l'action effectuée lorsque l'utilisateur appuie sur la touche entrée. Le libellé de l'action choisie est alors affiché sur la touche Entrée des claviers virtuels. Les valeurs possibles pour cet attribut sont go, done, next, search et send.
autocapitalize
Cet attribut non-standard, pris en charge par Chrome et Safari Mobile sur iOS permet de contrôler la façon dont le texte doit être mis en majuscules lorsqu'il est saisi par l'utilisateur. Les valeurs autorisées pour cet attribut sont :
  • none : la mise en majuscules automatique est désactivée
  • sentences : la première lettre de chaque phrase est automatiquement mise en majuscule
  • words : la première lettre de chaque mot est automatiquement mise en majuscule
  • characters : tous les caractères sont automatiquement convertis en majuscules
  • on : cette valeur est dépréciée depuis iOS 5 et était synonyme de sentences
  • off : cette valeur est dépréciée depuis iOS 5 et était synonyme de none.
Pour plus d'informations, consulter la documentation sur autocapitalize de laréférence HTML Safari.
autocomplete HTML5
Cet attribut permet d'indiquer si la valeur saisie doit automatiquement être complétée par le navigateur. Les valeurs possibles pour cet attribut sont :
  • off : aucune auto-complétion n'est effectuée par le navigateur. L'utilisateur doit saisir le champ à chaque utilisation ou le document doit fournir sa propre méthode d'auto-complétion.
  • on : le navigateur peut compléter automatiquement la valeur saisie par l'utilisateur en fonction des valeurs précédemment saisies, toutefois, aucune information n'est fournie quant au type de donnée qui pourrait être saisie.
  • name : un nom complet
  • honorific-prefix : un préfixe ou un titre (« M. », « Mme. », « Dr. »).
  • given-name : un prénom
  • additional-name : un deuxième prénom
  • family-name : un nom de famille
  • honorific-suffix: Suffix (e.g. "Jr.", "B.Sc.", "MBASW", "II").
  • nickname : un surnom ou un pseudonyme
  • email : une adresse électronique
  • username : un nom d'utilisateur
  • new-password : un nouveau mot de passe (par exemple lorsqu'on crée un compte ou qu'on change un mot de passe).
  • current-password : un mot de passe actuel
  • organization-title : un poste (par exemple « Ingénieur », « Président directeur »).
  • organization : un nom pour une entreprise ou une organisation
  • street-address : le numéro d'une adresse
  • address-line1, address-line2, address-line3, address-level4, address-level3, address-level2, address-level1 : les détails de l'adresse
  • country : un pays
  • country-name : un nom de pays
  • postal-code : un code postal
  • cc-name : un nom complet, tel qu'indiqué sur un moyen de paiement
  • cc-given-name : un nom usuel, tel qu'indiqué sur un moyen de paiement
  • cc-additional-name : un nom complémentaire, tel qu'indiqué sur un moyen de paiement
  • cc-family-name : un nom de famille, tel qu'indiqué sur un moyen de paiement
  • cc-number : un code identifiant le moyen de paiement (le numéro d'une carte de crédit par exemple)
  • cc-exp : la date d'expiration du moyen de paiement
  • cc-exp-month : le mois d'expiration du moyen de paiement
  • cc-exp-year : l'année d'expiration du moyen de paiement
  • cc-csc : le code de sécurité du moyen de paiement
  • cc-type : le type de moyen de paiement (par exemple « Visa »).
  • transaction-currency : la devise dans laquelle est effectuée la transaction
  • transaction-amount : le montant de la transaction
  • language : la langue privilégiée, ce doit être une balise de langue BCP 47 valide
  • bday : une date d'anniversaire
  • bday-day : le jour d'une date d'anniversaire
  • bday-month : le mois d'une date d'anniversaire
  • bday-year : l'année d'une date d'anniversaire
  • sex : une identité de genre, un texte libre sans saut de ligne
  • tel
  • url : l'URL d'une page web correspondant à l'entreprise, la personne, l'adresse ou le contact auquel les informations saisies font référence
  • photo : une photographie, une icône ou une image qui correspond à l'entreprise, la personne, l'adresse ou le contact auquel les informations saisies font référence.

Pour plus de détails, consulter le standard WHATWG.

Si l'attribut autocomplete n'est pas défini pour l'élément <input>, la valeur utilisée sera celle de l'attribut autocomplete du formulaire associé (voir l'attribut form)

À la différence des autres navigateurs, pour Firefox, l'attribut autocomplete permet également de gérer la persistance d'un état désactivé et/ou de la sélection obtenu dynamiquement via un script d'un élément <input> lors d'un rechargement de la page. La persistance est activée par défaut, on peut la désactiver en utilisant la valeur off pour autocomplete. Cela fonctionne y compris lorsque l'attribut autocomplete ne devrait pas s'appliquer vu le type utilisé. Cf. bug 654072.

Pour la plupart des navigateurs modernes (Firefox 38+, Google Chrome 34+, IE 11+), utiliser l'attribut autocomplete n'empêchera pas le gestionnaire de mot de passe du navigateur de demander à l'utilisateur s'il souhaite enregistrer les informations de connexion saisies et de compléter automatiquement les informations de connexion la prochaine fois que l'utilisateur visite la page. Voir l'article sur l'attribut autocomplete et les champs de connexion.

autocorrect
Cet attribut non-standard, uniquement pris en charge par Safari, permet de contrôler s'il doit y avoir une correction automatique de l'élément lorsque l'utilisateur saisit du texte dans l'élément <input>. Cet attribut peut prendre les valeurs suivantes :
  • on : la correction automatique est activée.
  • off : la correction automatique est désactivée.
Pour plus d'informations, consulter la documentation sur l'attribut autocorrect dans la référence HTML Safari. Voir également l'attribut spellcheck.
autofocus HTML5
Cet attribut booléen permet d'indiquer que l'élément doit recevoir le focus au chargement de la page. Seul un élément d'un formulaire du document peut avoir l'attribut autofocus actif. Cet attribut ne peut pas être appliqué si type vaut hidden. La mise du focus peut avoir lieu avant que l'évènement DOMContentLoaded soit déclenché.
capture

Lorsque l'attribut type vaut file, la présence de cet attribut booléen indique qu'il faut, si possible, utiliser un périphérique de capture de l'appareil plutôt qu'un explorateur de fichier.

checked

Lorsque l'attribut type vaut radio ou checkbox, la présence de cet attribut booléen indique que le contrôle doit être sélectionné par défaut. Pour les autres types, cet attribut est ignoré.

À la différence des autres navigateurs, par défaut, Firefox conservera un état coché défini de façon dynamique lors d'un rechargement de la page <input>. L'attribut autocomplete peut être utilisé pour contrôler cette fonctionnalité.

disabled

Cet attribut booléen indique que le contrôle est désactivé et qu'aucune interaction n'est possible. L'évènement click ne sera pas propagé sur les contrôles désactivés et la valeur d'un contrôle désactivé n'est pas envoyée avec le formulaire.

À la différence des autres navigateurs, par défaut, Firefox conservera un état désactivé défini de façon dynamique lors d'un rechargement de la page. L'attribut autocomplete peut être utilisé pour contrôler cette fonctionnalité.

form HTML5
L'élément de formulaire auquel l'élément <input> est rattaché. La valeur de cet attribut doit être l'identifiant (la valeur de l'attribut id) d'un élément <form> du même document. Si cet attribut n'est pas défini, l'élément <input> doit être un descendant d'un élément <form>. Cet attribut permet de placer un élément <input> n'importe où et pas uniquement comme descendant d'un formulaire. Un élément <input> donné ne peut être associé qu'à un seul formulaire.
formaction HTML5
L'URI du programme qui traite l'information transmise par l'élément <input> si celui-ci est un bouton d'envoi ou une image. Si cet attribut est utilisé, sa valeur surcharge celle de l'attribut action du formulaire associé.
formenctype HTML5
Si l'élément <input> est un bouton d'envoi ou une image, cet attribut définit le type de contenu utilisé pour envoyer le formulaire au serveur. Les valeurs possibles pour cet attribut sont :
  • application/x-www-form-urlencoded : la valeur par défaut si l'attribut n'est pas défini.
  • multipart/form-data : cette valeur doit être utilisée lorsque l'attribut type vaut file.
  • text/plain

Si cet attribut est utilisé, sa valeur surcharge celle de l'attribut enctype du formulaire associé.

formmethod HTML5
Si l'élément <input> est un bouton d'envoi ou une image, cet attribut définit la méthode HTTP utilisée par le navigateur pour transmettre le formulaire. Les valeurs possibles :
  • post : les données du formulaire sont incluses dans le corps du formulaire et sont envoyées au serveur.
  • get : les données du formulaire sont ajoutées après l'URI de l'attribut form, séparées par des points d'interrogation. L'URI ainsi obtenue est envoyée au serveur. Cette méthode doit uniquement être utilisée lorsque le formulaire n'a aucun effet de bord et qu'il ne contient que des caractères ASCII.

Si cet attribut est utilisé, sa valeur surcharge celle de l'attribut method du formulaire associé.

formnovalidate HTML5
Si l'élément <input> est un bouton d'envoi ou une image, cet attribut booléen indique que le formulaire ne doit pas être validé avant l'envoi. Si cet attribut est utilisé, sa valeur surcharge celle de l'attribut novalidate du formulaire associé.
formtarget HTML5
Si l'élément <input> est un bouton d'envoi ou une image, cet attribut est le nom ou le mot-clé correspondant au contexte de navigation (l'onglet, la fenêtre ou l'iframe) où afficher la réponse reçue après l'envoi du formulaire. Si cet attribut est utilisé, sa valeur surcharge celle de l'attribut target du formulaire associé. Les mots-clés suivants ont un sens particulier :
  • _self : la réponse est chargée dans le même contexte de navigation. Cette valeur est la valeur par défaut si l'attribut n'est pas défini.
  • _blank : la réponse est chargée dans un nouveau contexte de navigation anonyme.
  • _parent : la réponse est chargée dans le contexte de navigation parent du contexte courant. Si le contexte courant n'a pas de parent, cette option est synonyme de _self.
  • _top : la réponse est chargée dans le contexte de navigation de plus haut niveau (c'est-à-dire le contexte de navigation qui est un ancêtre du contexte courant et qui n'a pas de parent). Si le contexte courant n'a pas de parent, cette option est synonyme de _self.
height HTML5
Si la valeur de l'attribut type vaut image, cet attribut définit la hauteur de l'image affichée sur le bouton.
incremental
Cet attribut non-standard est pris en charge par WebKit (Safari) et Blink (Chrome) et s'applique uniquement lorsque l'attribut type vaut search. Si cet attribut est présent, quelle que soit sa valeur, l'élément <input> déclenchera des évènements search lorsque l'utilisateur édite la valeur du texte. L'évènement est uniquement déclenché après un certain délai, propre à l'implémentation. Une nouvelle frappe de touche réinitialise le délai. Si cet attribut est absent, l'évènement search est uniquement déclenché après que l'utilisateur ait explicitement lancé une recherche (par exemple en appuyant sur la touche Entrée). Pour d'autres informations, consulter la documentation sur incremental dans la référence HTML Safari.
inputmode HTML5
Une indication destinée au navigateur pour le clavier qui doit être affiché. Cet attribut s'applique uniquement lorsque l'attribut type vaut text, password, email, ou url. Les valeurs possibles pour cet attribut sont :
  • verbatim : un clavier alphanumérique pour les textes hors prose comme les noms d'utilisateur et les mots de passe.
  • latin : un clavier pour les langues utilisant l'alphabet latin et avec des aides à la saisie (comme la prédiction des termes). Ce clavier est destiné aux textes pour les interactions homme-ordinateur (les champs de recherche par exemple).
  • latin-name : semblable à latin mais pour la saisie de noms propres.
  • latin-prose : semblable à latin mais avec une aide à la saisie plus importante. Ce clavier est destiné aux textes pour les communications humaines.
  • full-width-latin : similaire à latin-prose, mais pour les langues secondaires de l'utilisateur.
  • kana : un clavier pour la saisie de caractères kana ou romaji (généralement des caractères hiragana) qui prend en charge la conversion en kanji. Ce clavier est conçu pour saisir des textes en japonais.
  • katakana : un clavier pour la saisie de caractères Katakana qui prend en charge la conversion en kanji. Ce clavier est conçu pour saisir des textes en japonais.
  • numeric : un clavier numérique qui contient des touches pour les chiffres 0 à 9, une touche pour le caractères qui permet de séparer les milliers et un caractère pour indiquer les nombres négatifs. Ce clavier est destiné à la saisie de codes numériques (par exemple le numéro d'une carte de crédit), pour saisir des nombres, on privilégiera <input type="number">.
  • tel : un clavier téléphonique, qui contient une astérisque et le dièse. Si possible, on utilisera <input type="tel"> plutôt que cette valeur d'attribut.
  • email : un clavier destiné à la saisie d'une adresse électronique. Si possible, on utilisera <input type="email"> plutôt que cette valeur d'attribut.
  • url : un clavier destiné à la saisie d'URL. Si possible, on privilégiera <input type="url"> à cet attribut.
list HTML5
Cet attribut est une liste d'options prédéfinies, suggérées à l'utilisateur. La valeur de cet attribut est l'identifiant (la valeur de l'attribut id) d'un élément <datalist> du même document. Le navigateur n'affiche que les options qui sont valides pour cet élément <input>. Cet attribut est ignoré lorsque l'attribut type vaut hidden, checkbox, radio, file ou que c'est un type de bouton.
max HTML5
La valeur maximale (numérique ou temporelle) de l'élément. Cette valeur ne doit pas être inférieure à l'attribut min.
maxlength
Lorsque l'attribut type vaut text, email, search, password, tel ou url, cet attribut définit le nombre maximal de caractères (exprimé en points de code Unicode) que l'utilisateur peut saisir. Pour les autres types de contrôle, cet attribut est ignoré. Cet attribut peut être supérieur à l'attribut size. Si cet attribut est absent ou que la valeur est négative, l'utilisateur peut saisir un nombre illimité de caractères. La contrainte est évaluée uniquement lorsque l'attribut a été modifié.
min HTML5
La valeur minimale (numérique ou temporelle) de l'élément. Cette valeur ne doit pas être supérieure à l'attribut max.
minlength HTML5
Lorsque l'attribut type vaut text, email, search, password, tel ou url, cet attribut définit le nombre minimal de caractères (exprimé en points de code Unicode) que l'utilisateur doit saisir. Pour les autres types de contrôle, cet attribut est ignoré.
multiple HTML5
Cet attribut booléen indique que l'utilisateur peut saisir plus d'une valeur. Cet attribut est appliqué lorsque type vaut email ou file, sinon, il est ignoré.
name
Le nom du contrôle, envoyé avec les données lors de l'envoi du formulaire.
pattern HTML5
Une expression rationnelle qui permet de vérifier la valeur saisie. L'expression doit correspondre à la valeur entière. L'attribut title peut être utilisé pour décrire le motif et aider l'utilisateur. Cet attribut est appliqué lorsque type vaut text, search, tel, url, email ou password, dans les autres cas, il est ignoré. Le langage d'expression rationnelle est le même que celui utilisé en JavaScript (cf. RegExp) et le paramètre 'u' permet de traiter l'expression comme une suite de codets Unicode. L'expression utilisée n'est pas entourée de barres obliques (slash).
placeholder HTML5
Une indication, destinée à l'utilisateur, pour ce qui peut être saisi dans le contrôle. Le texte de cet attribut ne doit pas contenir de saut de ligne.
Note : placeholder ne doit pas être utilisé à la place d'un élément <label>. L'élément <label> décrit le rôle de l'élément et l'attribut placeholder est une indication quant au contenu du format, le formulaire doit être compréhensible, même sans  placeholder.
readonly HTML5
Cet attribut indique que l'utilisateur ne peut pas modifier la valeur du contrôle. La valeur de cet attribut est ignorée lorsque l'attribut type vaut hidden, range, color, checkbox, radio, file, button ou submit.
required HTML5
Cet attribut indique que la valeur doit être renseignée avant que l'utilisateur puisse envoyer le formulaire. Il ne peut pas être utilisé lorsque l'attribut type vaut hidden, image ou est un bouton (submit, reset, button). Les pseudo-classes CSS :optional et :required seront appliquées si nécessaire.
results
Cet attribut non-standard est uniquement pris en charge par Safari et s'applique lorsque l'attribut type vaut search. Il est utilisé afin de contrôler le nombre maximal d'éléments (les recherches effectuées précédemment) qui devraient être affichés dans la liste déroulante de l'élément <input>. La valeur de cet attribut doit être un nombre entier positif.
selectionDirection HTML5
La direction dans laquelle la sélection est effectuée. Lorsque l'attribut vaut "forward", la sélection est appliquée dans le sens d'écriture (qui peut varier selon la locale), s'il vaut "backward", la sélection est appliquée dans le sens inverse du sens d'écriture. Si la direction de la sélection est inconnue, l'attribut peut prendre la valeur "none".
selectionEnd
Le décalage entre le contenu de l'élément et le dernier caractère sélectionné. S'il n'y a aucune sélection, la valeur indique la position du caractère qui suit le curseur de saisie.
selectionStart
Le décalage entre le contenu de l'élément et le premier caractère sélectionné. S'il n'y a aucune sélection, la valeur indique la position du caractère qui suit le curseur de saisie.
size
La taille initiale du contrôle. Cette valeur est exprimée en pixels, sauf lorsque l'attribut type vaut text ou password, auquel cas, la valeur correspond au nombre de caractères. À partir de HTML5, cet attribut ne s'applique que si l'attribut type vaut text, search, tel, url, email ou password, sinon il est ignoré. La valeur de size doit être supérieure à zéro. Si aucune taille n'est indiquée, c'est 20 qui est utilisé par défaut.
spellcheck HTML5
Cet attribut permet de gérer la vérification orthographique et grammaticale du contenu. Lorsqu'il vaut true, la vérification est activée. S'il vaut default, c'est le comportement par défaut qui s'applique, éventuellement dicté par la valeur de l'attribut spellcheck de l'élément parent. S'il vaut false, l'orthographe et la grammaire de la valeur ne doivent pas être vérifiées.
src
Si la valeur de l'attribut type vaut image, cet attribut indique l'URI de l'emplacement de l'image à afficher sur le bouton. Dans les autres cas, cet attribut est ignoré.
step HTML5
Cet attribut fonctionne avec les attributs min et max et permet de définir l'incrément utilisé pour passer d'une valeur à l'autre (dans le cas d'une valeur numérique ou d'une date). Cet attribut peut valoir la chaîne de caractères any ou un nombre décimal positif. Si la valeur de cet attribut est différente de any, le contrôle acceptera uniquement les valeurs qui sont des multiples de l'incrément et qui sont supérieures au minimum fourni par min.
usemap HTML 4 uniquement, Obsolète depuis HTML5
Le nom d'un élément <map> à utiliser comme une carte cliquable.
value
La valeur initiale du contrôle. Cet attribut est optionnel sauf lorsque l'attribut type vaut radio ou checkbox.
Lors du rechargement de la page, Gecko et IE ignoreront la valeur définie dans le fichier source HTML si la valeur a été modifiée avant le rechargement.
webkitdirectory
Cet attribut booléen permet d'indiquer que le sélecteur de fichier, lorsque l'attribut type vaut file, permet uniquement de sélectionner des répertoires.
width HTML5
Si la valeur de l'attribut type est image, cet attribut définit la largeur de l'image affichée dans le bouton de saisie.
x-moz-errormessage
Un attribut spécifique à Mozilla qui permet d'indiquer un message d'erreur à afficher lorsque le champ ne respecte pas les conditions de validation.

Notes

Utilisation des fichiers

Note : À partir de Gecko 2.0, lorsqu'on appelle la méthode click() sur un élément <input> de type "file", cela ouvre le sélecteur de fichier que l'utilisateur peut utiliser pour sélectionner des fichiers. Voir la page Utiliser des fichiers à partir d'applications web pour un exemple et plus de détails.

On ne peut pas définir la valeur d'un sélecteur de fichiers via un script. Le script qui suit n'aurait aucun effet :

var e = getElementById("unInputFile");
e.value = "toto";

Lorsqu'un fichier est choisi via <input type="file">, le chemin réel qui mène au fichier source n'est pas communiqué à l'attribut value (pour des raisons de sécurité évidentes). Le nom de fichier est communiqué et préfixé par C:\fakepath\. Il y a certaines raisons historiques à ce préfixe qui est en fait pris en charge par l'ensemble des navigateurs modernes. Ce préfixe est également défini dans la spécification.

Messages d'erreur

Si on souhaite avoir un message d'erreur personnalisé lors d'un échec de validation, dans Firefox, on pourra utiliser l'attribut x-moz-errormessage :

<input type="email"
 x-moz-errormessage="Please specify a valid email address.">

Attention, cette méthode n'est pas standard et cela n'aura aucun effet sur les autres navigateurs.

Exemples

Exemple simple

HTML

<p>Un élément de saisie simple </p>
<input type="text" value="Saisir un texte ici">

Résultat

Un scénario fréquent

HTML

<p>Un formulaire avec différents types de champs</p>
<form action="getform.php" method="get">
  <label>Prénom : <input type="text"></label><br>
  <label>Nom : <input type="text"></label><br>
  <label>Adresse email : <input type="email"></label><br>
  <input type="submit" value="Envoyer">
</form>

Résultat

Utiliser l'attribut mozactionhint sur Firefox mobile

L'attribut mozactionhint peut être utilisé afin de définir le texte pour la touche Entrée du clavier virtuel affiché sur l'écran de l'appareil. Dans l'exemple qui suit, on affiche Next dans le clavier :

<input type="text" mozactionhint="next">

Ce qui donne :

mozactionhint.png

Localisation

Pour certains types d'éléments <input>, les valeurs saisies autorisées dépendent de la locale utilisée. Ainsi, dans certaines locales, 1,000.00 est un nombre valide alors que dans d'autres, il faudra avoir saisi 1.000,00 pour exprimer le même nombre.

Firefox utilise la méthode heuristique suivante afin de déterminer la locale pour laquelle valider la saisie de l'utilisateur (au moins dans le cas de type="number"):

  • Utiliser la langue définie par l'attribut lang/xml:lang de l'élément ou par celui de ses parents.
  • SInon utiliser la langue définie dans l'en-tête HTTP Content-Language
  • Sinon, utiliser la locale du navigateur

Spécifications

Spécification État Commentaires
WHATWG HTML Living Standard
La définition de '<input>' dans cette spécification.		 Standard évolutif  
HTML Media Capture
La définition de '<input capture>' dans cette spécification.		 Candidat au statut de recommandation Ajout de l'élément capture.
HTML5
La définition de '<input>' dans cette spécification.		 Recommendation  
HTML 4.01 Specification
La définition de '<form>' dans cette spécification.		 Recommendation  

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1.0 1.0 (1.7 ou moins) (Oui)[1] 1.0 1.0
type 1.0 1.0 (1.7 ou moins) 2 1.0 1.0
type=button 1.0 1.0 (1.7 ou moins) 3 1.0 1.0
type=checkbox 1.0 1.0 (1.7 ou moins)
3.6 (1.9.2)[2]		 2 1.0 1.0
type=color 21.0 29.0 (29.0) Pas de support 11.01 Pas de support
type=date 5.0[24] Pas de support[3] Pas de support 10.62 (Oui)[4]
type=datetime Pas de support[4] Pas de support[3] Pas de support 10.62 (Oui)[4]
type=datetime-local 5.0 Pas de support[3] Pas de support 10.62 (Oui)[4]
type=email 5.0 4.0 (2.0) 10 10.62 ?
type=file 1.0 1.0 (1.7 ou moins) 3.02 1.0 1.0
type=hidden 1.0 1.0 (1.7 ou moins) 2 1.0 1.0
type=image 1.0 1.0 (1.7 ou moins)[5] 2 1.0 1.0
type=month 5.0 Pas de support[6] Pas de support 10.62 (Oui)[4]
type=number 6.0[7] 29.0 (29.0) 10[4] 10.62 (Oui)
type=password 1.0 1.0 (1.7 ou moins) 2 1.0 1.0
type=radio 1.0 1.0 (1.7 ou moins)
3.6 (1.9.2)[2]		 2 1.0 1.0
type=range 5.0 23.0 (23.0) 10 10.62[8] (Oui)
type=reset 1.0 1.0 (1.7 ou moins) 2 1.0 1.0
type=search 5.0 4.0 (2.0) 10 11.01 (Oui)
type=submit 1.0 1.0 (1.7 ou moins) 2 1.0 1.0
type=tel 5.0 4.0 (2.0) 10 11.01 ?
type=text 1.0 1.0 (1.7 ou moins) 2 1.0 1.0
type=time 5.0 Pas de support[3] Pas de support 10.62 (Oui)[4]
type=url 5.0 4.0 (2.0) 10 10.62 ?
type=week 5.0 Pas de support[3] Pas de support 10.62 (Oui)[4]
accept=[file extension] (Oui) Pas de support 10 ? Pas de support
accept=[MIME type] 8.0 16.0 (16.0) 10 10 Pas de support
accept=audio/* (Oui) 4.0 (2.0)[9] 10 Pas de support Pas de support
accept=video/* (Oui) 4.0 (2.0)[10] 10 Pas de support Pas de support
accept=image/* (Oui) 4.0 (2.0)[11] 10 Pas de support Pas de support
accept=[. + ext] ? 37.0 (37.0) ? ? ?
accesskey 1.0 (Oui) 6 1.0 ?
mozactionhint Pas de support 4.0 (2.0) Pas de support Pas de support Pas de support
autocapitalize 43 ? ? ? (Oui)
autocomplete 17.0 4.0 (2.0) 5 9.6 5.2
autofocus 5.0 4.0 (2.0) 10 9.6 5.0
capture Chrome for Android (0.16) ? ? ? ?
checked 1.0 1.0 (1.7 ou moins) 2 1.0 1.0
disabled 1.0 1.0 (1.7 ou moins)[25] 6 1.0 1.0
fakepath utilisé comme préfixe pour les fichiers (Oui) 53 (53) (Oui) (Oui) (Oui)
form 9.0 4.0 (2.0) ? 10.62 ?
formaction 9.0 4.0 (2.0) 10 10.62 5.2
formenctype 9.0 4.0 (2.0) 10 10.62 ?
formmethod 9.0 4.0 (2.0) 10 10.62 5.2
formnovalidate 5.0[12] 4.0 (2.0) 10 10.62 ?
formtarget 9.0 4.0 (2.0) 10 10.62 5.2
height 1.0 16.0 (16.0) ? 1.0 ?
incremental (Oui) Pas de support Pas de support Pas de support (Oui)
inputmode Pas de support Pas de support Pas de support Pas de support Pas de support
list 20.0 4.0 (2.0) 10 9.6 Pas de support
max 5.0 16.0 (16.0) ? 10.62 ?
maxlength 1.0 1.0 (1.7 ou moins) 2 1.0 1.0
min 5.0 16.0 (16.0) ? 10.62 ?
minlength 40.0 ? ? ? ?
multiple 1.0[13] 3.6 (1.9.2)[14]
(Oui)[15]		 10 1.0
10.62[14]
11.01[15]		 ?
name 1.0 1.0 (1.7 ou moins) 2 1.0 1.0
pattern 5.0 4.0 (2.0) 10 9.6 Pas de support
placeholder 10.0 4.0 (2.0) 10 11.00 5.0
readonly 1.0 1.0 (1.7 ou moins) 6[16] 1.0 1.0
required 5.0
10[17]		 4.0 (2.0) 10 9.6 Pas de support
size 1.0 1.0 (1.7 ou moins) 2 1.0 1.0
spellcheck 10.0 3.6 (1.9.2) 10 11.0 4.0
src 1.0 1.0 (1.7 ou moins) 2 1.0 1.0
step 6.0 16.0 (16.0) 10 10.62 5.0
tabindex 1.0 1.0 (1.7 ou moins) 6[18] (Oui) ?
webkitdirectory (Oui) 49.0 (49.0) ? (Oui) (Oui)
width 1.0 16.0 (16.0) ? 1.0 ?
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple (Oui) 4.0 (2.0) (Oui) (Oui) (Oui)
type (Oui) (Oui) (Oui) (Oui) (Oui)
type=button (Oui) (Oui)[27] (Oui) (Oui) (Oui)
type=checkbox (Oui) (Oui) (Oui) (Oui) (Oui)
type=color ? 27.0 (27.0) ? (Oui) ?
type=date Pas de support Pas de support Pas de support 10.62 5.0[23]
type=datetime Pas de support Pas de support Pas de support 10.62 (Oui)[23]
type=datetime-local Pas de support Pas de support Pas de support 10.62 (Oui)[23]
type=email ? 4.0 (2.0) ? (Oui) 3.1[19]
type=file ? ?[27] ? ? (Oui)[21]
type=hidden (Oui) (Oui) (Oui) (Oui) (Oui)
type=image (Oui) (Oui) (Oui) (Oui) (Oui)
type=month Pas de support Pas de support Pas de support 10.62 (Oui)[23]
type=number 2.3 29.0 (29.0) ? (Oui) 4.0[19]
type=password (Oui) (Oui) (Oui) (Oui) (Oui)[22]
type=radio (Oui) (Oui) (Oui) (Oui) (Oui)
type=range ? Pas de support ? (Oui) 5.0
type=reset (Oui) (Oui) (Oui) (Oui) (Oui)
type=search ? 4.0 (2.0) ? 10.62 4.0[22]
type=submit (Oui) (Oui)[27] (Oui) (Oui) (Oui)
type=tel 2.3 4.0 (2.0) ? 10.62 3.1[22]
type=text (Oui) (Oui)[27] (Oui) (Oui) (Oui)[22]
type=time Pas de support Pas de support Pas de support 10.62 (Oui)[23]
type=url ? 4.0 (2.0) ? 10.62 3.1[19]
type=week Pas de support Pas de support Pas de support 10.62 (Oui)
accept=[MIME type] ? ? ? ? ?
accept=audio/* ? ? ? ? ?
accept=image/* ? ?[26] ? ? ?
accept=video/* ? ? ? ? ?
accept=[. + ext] ? 37.0 (37.0) ? ? ?
accesskey ? ? ? ? ?
autocapitalize ? ? ? ? ?[28]
autocomplete ? 4.0 (2.0) (Oui) (Oui) (Oui)
autofocus 3.2 4.0 (2.0) ? (Oui) ?
capture 3.0 10.0 (10.0) ? ? 6.0
checked (Oui) (Oui) (Oui) (Oui) (Oui)
disabled (Oui) 4.0 (2.0) (Oui) (Oui) (Oui)
fakepath utilisé comme préfixe pour les fichiers (Oui) 53.0 (53) (Oui) (Oui) (Oui)
form ? ? ? ? ?
formaction ? 4.0 (2.0) ? 10.62 5.0
formenctype ? ? ? ? ?
formmethod ? 4.0 (2.0) ? 10.62 5.0
formnovalidate ? 4.0 (2.0) ? 10.62 ?
formtarget ? 4.0 (2.0) ? 10.62 5.0
height ? 16.0 (16.0) ? ? ?
list Pas de support 4.0 (2.0) ? (Oui) ?
max ? 16.0 (16.0)[20] ? 10.62 ?
maxlength (Oui) 4.0 (2.0) (Oui) (Oui) (Oui)
min ? 16.0 (16.0)[20] ? 10.62 ?
minlength ? Pas de support ? 27.0 ?
multiple ? (Oui) ? (Oui) ?
name (Oui) 4.0 (2.0) (Oui) (Oui) 1.0
pattern ? 4.0 (2.0) ? (Oui) (Oui)
placeholder 2.3 4.0 (2.0) ? 11.10 4
readonly (Oui) 4.0 (2.0) (Oui) (Oui) (Oui)
required ? (Oui) ? (Oui) ?
size (Oui) 4.0 (2.0) (Oui) (Oui) (Oui)
spellcheck ? 4.0 (2.0) ? 11.0 ?
src ? ? ? ? ?
step ? 16.0 (16.0)[20] ? 10.62 ?
tabindex ? ? ? ? ?
webkitdirectory (Oui) 49.0 (49.0) ? (Oui) (Oui)
width ? 16.0 (16.0) ? ? ?

[1] Cette fonctionnalité a été implémentée dans la version 2 ou dans une version antérieure.

[2] Implémentée pour la valeur indeterminate.

[3] Cette fonctionnalité n'est pas encore implémentée. Cf. bug 888320 et la page du wiki de mozilla

[4] Ce type est reconnu mais il n'y a pas d'interface utilisateur fournie.

[5] Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) envoie uniquement les coordonnées x et y de l'emplacement du clic et plus la paire name/value de l'élément.

[6] Cette fonctionnalité n'est pas encore implémentée. Cf. bug 888320.

[7] Localisation effectuée à partir de Chrome 11.

[8] Opera 11.01 prend en charge la valeur par défaut.

[9] Mise en place des filtres pour les fichiers audio avec les extensions suivantes : .aac, .aif, .flac, .iff, .m4a, .m4b, .mid, .midi, .mp3, .mpa, .mpc, .oga, .ogg, .ra, .ram, .snd, .wav, .wma.

[10] Mise en place des filtres pour les fichiers vidéo avec les extensions suivantes : .avi, .divx, .flv, .m4v, .mkv, .mov, .mp4, .mpeg, .mpg, .ogm, .ogv, .ogx, .rm, .rmvb, .smil, .webm, .wmv, .xvid

[11] Mise en place des filtres pour les fichiers image avec les extensions suivantes : .jpe, .jpg, .jpeg, .gif, .png, .bmp, .ico, .svg, .svgz, .tif, .tiff, .ai, .drw, .pct, .psp, .xcf, .psd, .raw

[12] In 6.0 it only worked with the HTML5 document type, validation support in 7.0 was disabled and re-enabled in 10.0.

[13] Prise en charge pour les types type="file" et type="email" à partir de la version 5.0.

[14] Prise en charge pour type="file".

[15] Prise en charge pour type="email".

[16] Absent pour les types type="checkbox" et type="radio".

[17] Prise en charge pour l'élément <select>.

[18] Les éléments avec tabindex > 0 ne sont pas parcourus lors de la navigation.

[19] Aucune validation appliquée mais un clavier spécifique est fourni. Safari Mobile pour iOS applique une mise en forme par défaut avec opacity: 0.4 pour les éléments <input> textuels désactivés. Les autres navigateurs n'appliquent pas cette mise en forme particulière.

[20] L'interface utilisateur n'est pas encore implémentée.

[21] Le téléversement de fichiers ne fonctionnait pas pour Safari pour iOS 8.0 et 8.0.1. L'anomalie a été corrigée dans iOS 8.0.2.

[22] Aucune validation appliquée mais un clavier spécifique est fourni. Safari Mobile pour iOS applique une mise en forme par défaut avec opacity: 0.4 pour les éléments <input> textuels désactivés. Les autres navigateurs n'appliquent pas cette mise en forme particulière.

[23] Sur Safari Mobile pour iOS, utiliser display: block sur un élément <input> de type type="date", type="time", type="datetime", type="datetime-local" ou type="month" empêche que le texte contenu dans <input> soit correctement aligné verticalement. Cf. WebKit bug 139848.

[24] À partir de Chrome 39, un élément <input> de type "date" mis en forme avec display: table-cell; width: 100%; aura une largeur minimale (min-width) imposée par Chrome et l'élément ne pourra pas être plus étroit que cette largeur. Cf bug #346051.

[25] À la différence des autres navigateurs, Firefox conservera l'état désactivé mis en place dynamiquement pour un élément <input> malgré le rechargement de la page. L'attribut autocomplete avec la valeur off permet de désactiver cette fonctionnalité. Cela fonctionne également lorsque l'attribut autocomplete ne devrait pas être appliqué à l'élément <input> en raison de son type. Cf. bug 654072.

[26] À partir de Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6), Firefox pour Android permet aux utilisateurs de prendre des photos avec l'appareil photo pour les téléverser, sans qu'il soit nécessaire de quitter le navigateur. Les développeurs web peuvent implémenter cette fonctionnalité en utilisant la valeur image/* dans l'attribut accept d'un élément <input> de type "file".

[27] Par défaut, Firefox pour Android applique un dégradé background-image sur les éléments <input> de type "file". Ce dégradé peut être désactivé grâce à la règle background-image: none;. Firefox pour Android applique également une bordure border par défaut sur ces éléments.

[28] Dans Safari, autocapitalize="words" met en majuscule les deuxièmes lettres de chaque mot.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, lionel, marie-ototoi, nicofrand, wakka27, Flaburgan, jbeuh, arnaudbienner, msherefel, tregagnon, teoli
 Dernière mise à jour par : SphinxKnight,