<input>

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.

Exemple

Pour voir ce à quoi correspondent les différents types d'élément <input>n vous pouvez éditer l'attribut type dans l'exemple suivant et voir le résultat immédiatement. La valeur initiale (text) permet de saisir un champ texte simple mais il est possible d'utiliser d'autres valeurs number, color, checkbox, radio, date, file, month, password, range ou time.

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 permettant de sélectionner/déselectionner une valeur.
• color : 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 : un contrôle qui permet de saisir une date (sans heure).
• datetime-local : un contrôle qui permet de saisir une date et une heure, sans fuseau horaire associé.
• email : un champ qui permet d'éditer une adresse email.
• 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 : 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 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. Pour un groupe donné, seul un bouton radio peut être sélectionné à un instant donné.
• range : un contrôle qui permet de saisir un nombre dont la valeur exacte n'est pas importante.
• reset : un bouton qui permet de réinitialiser le contenu des éléments du formulaire avec leurs valeurs par défaut.
• search : 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 : un contrôle qui permet de saisir un numéro de téléphone.
• text : un champ de texte sur une seule ligne. Les sauts de ligne sont automatiquement retirés de la valeur saisie.
• time : contrôle qui permet de saisir une valeur pour une heure, sans fuseau horaire associé.
• url : un champ qui permet d'éditer une URL.
• week : HTML5 un contrôle qui permet de saisir une semaine sous la forme d'un numéro de semaine, sans fuseau horaire associé.
• Types obsolètes
  • 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.

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

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. », « M^me. », « D^r. »).
• 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 : un numéro de téléphone complet avec l'indicateur du pays
• 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.

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

Note : La mise automatique du focus sur un contrôle de formulaire peut être source de confusion pour les personnes qui souffrent de troubles de la vision et/ou utilisent des outils d'assistance. En effet, avec l'autofocus, le lecteur d'écran téléporte automatiquement la personne sur le contrôle du formulaire sans préalablement l'avertir de ce comportement.

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> sera associé à l'élément ancêtre <form> le plus proche, s'il existe. 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é pourra être associé à un formulaire maximum.

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.

inputmodeHTML5

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 :

• none : aucun clavier virtuel ne devrait être affiché.
• text : un clavier pour saisir du texte dans la langue de l'utilisateur
• decimal : un clavier pour saisir des nombres décimaux.
• 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.

Conflit de spécifications : La spécification du WHATWG décrit inputmode et la plupart des navigateurs modernes travaillent à son implémentation. En revanche, la spécification HTML 5.2 du W3C ne le mentionne plus (il est donc considéré comme obsolète). Jusqu'à ce qu'un consensus soit atteint, il est préférable de prendre en compte la définition du WHATWG.

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.

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.

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.

Attributs non-standards

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.

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.

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.

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.

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.

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.

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

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

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

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

[1] Type reconnu mais pas d'interface utilisateur associée.

[2] Absent pour les types "checkbox" et "radio".

[4] datetime a été retiré de la spécification et des navigateurs pour être remplacé par datetime-local.

[5] Cf. bug 1355389

[6] Pas encore implémenté. Suivre bug 888320 et les types TPE DOM/Date pour <input> pour plus d'informations.

Voir aussi

• Les autres éléments relatifs aux formulaires HTML : <form>, <button>, <datalist>, <legend>, <label>, <select>, <optgroup>, <option>, <textarea>, <keygen>, <fieldset>, <output>, <progress> et <meter>.
• Dans certains cas, l'élément <input> est un élément remplacé, sa position et sa taille dans le cadre de l'élément peuvent être ajustées grâce aux propriétés CSS object-position et object-fit.