<input>

Résumé

L'élément HTML <input> est utilisé pour créer des contrôles interactifs dans les formulaires web.

• Catégories de contenu Contenu de flux, contenu phrasé, contenu associé aux formulaires (listed, submittable, resettable). Si le type n'a pas la valeur hidden, labellisé et contenu palpable.
• Contenu autorisé Aucun, c'est un élément vide
• Omission de balises Doit avoir une balise de début mais pas de balise de fin.
• Élément parents autorisés Tout élément acceptant du contenu phrasé.
• Interface DOM HTMLInputElement

Attributs

Cet élément inclut les attributs globaux.

type

Le type de contrôle à afficher. La valeur par défaut est text. Plusieurs valeurs sont possibles :

• button : Un bouton, sans comportement par défaut
• checkbox : Une case à cocher. Il faut utiliser l'attribut value pour définir la valeur envoyée par cette objet. L'attribut checked permet d'indiquer si oui ou non la case est cochée. Il est également possible d'utiliser l'attribut indeterminate pour indiquer un état indéterminé (cela se traduira dans la plupart des plates-formes par une ligne horizontale dans la case)
• color : HTML5 Un contrôle permettant de spécifier une couleur. Une interface de sélection de couleur ne nécessite pas des fonctionnalités autre qu'accepter des couleurs en tant que texte (plus d'infos).
• date : HTML5 Un contrôle pour saisir une date  (année, mois et jour, pas d'heure).
• datetime : HTML5 Un contrôle pour saisir une date et une heure, basée sur l'heure UTC (heure, minute, seconde et fraction de seconde)
• datetime-local : HTML5 Un contrôle pour saisir une date et une heure sans fuseau horaire
• email : HTML5 Un champ pour éditer une adresse e-mail.
  Les pseudo-classes CSS :valid et :invalid sont appliquées de manière correspondante.
• file : Un contrôle qui permet à l'utilisateur de sélectionner un fichier. L'attribut accept est utilisé pour définir les types de fichiers que le contrôle peut sélectionner.
• hidden : Un contrôle qui n'est pas affiché mais dont la valeur est envoyée au serveur.
• image : Un bouton graphique pour soumettre le formulaire. L'attribut src doit être utilisé pour définir la source de l'image et l'attribut alt doit être utilisé pour définir un texte de remplacement. Il est possible d'utiliser les attributs height et width pour définir la taille de l'image en pixels.
• month : HTML5 Un contrôle permettant de saisir un mois et une année, sans fuseau horaire.
• number : HTML5 Un contrôle permettant de saisir un nombre flottant.
• password : Un champ de texte sur une seule ligne dont la valeur sera masquée. Il faut utiliser l'attribut maxlength si l'on souhaite spécifier la longueur maximale de la valeur à entrer.
• radio : Un bouton radio. Il est nécessaire d'utiliser l'attribut value pour définir la valeur envoyée par l'objet. L'attribut checked peut être utilisé pour indiquer si oui ou non, l'objet est sélectionné par défaut. Les boutons radio qui ont la même valeur pour leurs attributs name appartiennent au même « groupe de boutons radio ». Seul un bouton radio à la fois peut être sélectionné par groupe.
• range : HTML5 Un contrôle permettant de saisir un nombre dont la valeur exacte n'est pas importante. Ce contrôle utilise les valeurs par défaut suivantes pour les attributs correspondants :
  • min : 0
  • max : 100
  • value : min + (max-min)/2, ou min si max est inférieur à min
  • step : 1
• reset : Un bouton qui réinitialise le contenu du formulaire avec les valeurs par défaut.
• search : HTML5 Un champ de texte sur une seule ligne qui permet de saisir des mots-clés pour une recherche. Les sauts à la ligne sont automatiquement retirés de la valeur envoyée.
• submit : Un bouton pour soumettre le formulaire.
• tel : HTML5 Un contrôle pour saisir un numéro de téléphone. Les sauts à la ligne sont automatiquement retirés de la valeur envoyée, il n'y a pas d'autres restriction de syntaxe. Les attributs pattern et maxlength peuvent être utilisés pour restreindre les valeurs. Les pseudo-classes :valid et :invalid seront appliquées de manière correspondante.
• text : Un champ de texte sur une seule ligne. Les sauts à la ligne sont automatiquement retirés de la valeur envoyée.
• time : HTML5 Un contrôle pour saisir une heure, sans fuseau horaire.
• url : HTML5 Un champ pour éditer une URL. L'utilisateur peut tout à fait entrer une adresse vide ou invalide. Les sauts à la lignes sont automatiquement retirés de la valeur envoyée. Les attributs pattern et maxlength peuvent être utilisés pour restreindre les valeurs possibles. Les pseudo-classes CSS :valid et :invalid seront appliquées de manière correspondante.
• week : HTML5 Un contrôle permettant de saisir une date formée d'une année et d'un numéro de semaine, sans fuseau horaire.

accept

Si la valeur de l'attribut type est file, cet attribut indique les types de fichiers que le serveur acceptera. Sinon cet attribut est ignoré. La valeur de cet attribut est une liste de valeurs séparées par des virgules, ces valeurs peuvent être :

• Une extension de fichier commençant par le caractère STOP (U+002E). (Par exemple ".jpg,.png,.doc")
• Un type MIME valide sans extension
• audio/* pour des fichiers sonores HTML5
• video/* pour des fichiers vidéos HTML5
• image/* pour des fichiers images HTML5

accesskey HTML 4 seulement, Obsolète depuis HTML5

La valeur de cet attribut est une touche que l'utilisateur peut utiliser pour que le formulaire sélectionne le contrôle. Cet attribut est global en HTML5.

mozactionhint

Cet attribut définit une « indication d'action » qui peut être utilisée sur les appareils mobiles pour remplacer le texte de la touche d'entrée sur les claviers virtuels. Les valeurs supportées sont go, done, next, search, et send. Ces valeurs sont automatiquement associées à la bonne chaîne de caractères (et sont sensibles à la casse).

autocomplete HTML5

Cet attribut indique si oui ou non la valeur du contrôle peut être automatiquement complétée par le navigateur. Cet attribut est ignoré si la valeur de l'attribut type est hidden, checkbox, radio, file, ou que l'élément est un bouton (button, submit, reset, image). Les différentes valeurs possibles sont :

• off : L'utilisateur doit entrer la valeur de manière explicite et/ou le document fourni sa propre méthode d'auto-complétion. Le navigateur ne complète pas l'entrée.
• on : La navigateur peut compléter automatiquement la valeur en se basant sur des valeurs que l'utilisateur a rentré précédemment.

Si l'attribut autocomplete n'est pas renseigné, le navigateur utilise alors la valeur de l'attribut autocomplete de l'élément formulaire rattaché. Le formulaire rattaché est soit l'élément form dont l'élément <input> est un descendant ou un élément form dont l'id est spécifié par l'attribut form de l'élément input. Pour plus d'informations, consulter l'attribut autocomplete de l'élément <form>.

autofocus HTML5

Cet attribut booléen permet de spécifier si oui ou non la page devrait sélectionner le contrôle après son chargement (sauf si l'utilisateur remplit un autre contrôle). Un seul élement form par document peut avoir un attribut autofocus. Cet attribut ne peut pas appliqué si l'attribut type vaut hidden.

autosave HTML5

Cet attribut devrait être défini avec une valeur unique. Si la valeur de l'attribut type est search, les termes saisis lors des recherches précédentes seront affichés dans une liste défilante.

checked

Lorsque la valeur de l'attribut type est radio ou checkbox, la présence de cet attribut booléen indique que le contrôle est sélectionné par défaut, sinon il est ignoré.

disabled

Cet attribut booléen indique que le contrôle ne peut pas être utilisé. L'événement  click ne sera pas notifié par les contrôles désactivés de cette manière. La valeur d'un contrôle désactivé n'est pas envoyée par le formulaire.

Cet attribut est ignoré si la valeur de l'attribut type est hidden.

form HTML5

L'élément formulaire auquel cet élément est associé (son formulaire « propriétaire »). La valeur de cet attribut doit être l'identifiant (ou id) d'un élément <form> présent dans le même document. Si cet attribut n'est pas spécifié, l'élément <input> doit être un descendant d'un élément <form>. Cet attribut permet de disposer des éléments <input> au sein du document sans qu'ils soient directement descendants de leur formulaire. Un élément input ne peut être qu'associé à un seul élément de formulaire.

formactionHTML5

L'URI d'un programme qui traite l'information soumise par cet élément si c'est un bouton d'envoi ou une image. Si cet attribut est renseigné, il outrepasse l'attribut action de l'élément formulaire propriétaire.

formenctypeHTML5

Si l'élément est un bouton d'envoi ou une image, cet attribut définit le type du contenu utilisé pour envoyer le formulaire au serveur. Les différentes valeurs possibles sont :

• application/x-www-form-urlencoded : La valeur par défaut de l'attribut s'il n'est pas renseigné.
• multipart/form-data : Cette valeur doit être utilisée si un élément <input> possède l'attribut type avec une valeur file.
• text/plain

Si cet attribut est renseigné, il outrepasse l'attribut enctype de l'élément formulaire propriétaire.

formmethodHTML5

Si l'élément est un bouton d'envoi ou une image, cet attribut définit la méthode HTTP à utiliser par le navigateur pour soumettre le formulaire. Les différents valeurs sont :

• post : Les données du formulaire sont incluses dans le corps du formulaire et envoyées au serveur.
• get : Les données du formulaires sont concaténées à l'URI de l'attribut form, séparées par un '?'. L'URI résultant est envoyé au serveur. Cette méthode ne doit être utilisée que lorsque le formulaire n'a pas d'effets de bord et ne contient seulement que des caractères ASCII.

Si cet attribut est renseigné, il outrepasse l'attribut method de l'élément formulaire propriétaire de l'élément input.

formnovalidateHTML5

Si l'élément est un bouton d'envoi ou une image, cet attribut booléen définit si oui ou non le formulaire ne doit pas être validé lorsqu'il est envoyé. Si l'attribut est renseigné, il outrepasse l'attribut novalidate de l'élément formulaire propriétaire de l'élément input.

formtargetHTML5

Si l'élément est un bouton d'envoi ou une image, cet attribut est un nom ou un mot-clé indiquant où sera affichée la réponse reçue après l'envoi du formulaire. C'est le nom (ou le mot-clé) d'un contexte de navigation (un onglet, une fenêtre, une frame). Si cet attribut est renseigné, il outrepasse l'attribut target de l'élément formulaire propriétaire de l'élément <input>. Les mots-clés qui suivent ont un sens particulier :

• _self : Charge la réponse dans le même contexte de navigation. C'est la valeur par défaut.
• _blank : Charge la réponse dans un nouveau contexte de navigation, ce dernier n'a pas de nom.
• _parent : Charge la réponse dans le contexte de navigation parent. S'il n'y a pas de parent, cette option se comporte comme  _self.
• _top : Charge la réponse dans le contexte de navigation de plus haut niveau (autrement dit le contexte de navigation qui est un ancre du contexte courant et qui n'a pas de parent). S'il n'y a pas de parent, cette option se comporte comme _self.

height HTML5

Si la valeur de l'attribut type est image, cet attribut définit la hauteur de l'image à afficher pour le bouton.

inputmode HTML5

Une indication fournie au navigateur pour le clavier à afficher. Cet attribut ne s'applique que pour les éléments input dont l'attribut type vaut text, password, email, ou url. Les valeurs possibles sont :

• verbatim : Contenu alpha-numérique comme les noms d'utilisateurs et les mots de passe.
• latin : Entrée en écriture latine dans la langue préferée de l'utilisateur, inclue les aides à la complétion comme la prédiction de texte. Convient pour la communication homme-machine, notamment pour les champs de recherche.
• latin-name: Comme latin, mais concerne les noms humains.
• latin-prose: Comme latin, mais avec une aide à la complétion plus prononcée. Convient pour les communications entre humains comme les messageries instantanées ou les e-mails/
• full-width-latin : Comme latin-prose, mais concerne les langages secondaires de l'utilisateur.
• kana : saisie en Kana ou romaji, généralement une saisie en hiragana, utilise des caractères en avec une largeur totale, supporte la conversion des caractères en kanji. Conçu pour des saisies de textes en japonais.
• katakana : saisie en Katakana input, utilise des caractères en avec une largeur totale, supporte la conversion des caractères en kanji. Conçu pour des saisies de textes en japonais.
• numeric : saisie numérique, incluant les touches pour les chiffres 0 à 9 ainsi que le séparateur des milliers de l'utilisateur, le caractère indiquant un nombre négatif. Conçu pour des codes numériques comme les numéros de cartes de crédit. Pour des nombres « réels », il est préférable d'utiliser <input type="number">
• tel : saisie d'un numéro de téléphone, inclut l'astérisque et le dièse. Il est préferable d'utiliser <input type="tel"> lorsque cela est possible.
• email : saisie d'une adresse e-mail. Il est préferable d'utiliser <input type="email"> lorsque cela est possible.
• url : saisie d'une URL. Il est préferable d'utiliser <input type="url"> lorsque cela est possible.

list HTML5

Définit une liste d'options pré-définies à suggérer à l'utilisateur. La valeur de cet attribut doit être l'identifiant (ou id) d'un élément <datalist> du même document. Le navigateur affiche uniquement les valeurs qui sont valides pour cet élément input. Cet attribut est ignoré si la valeur de l'attribut type est hidden, checkbox, radio, file, ou que c'est un bouton.

max HTML5

La valeur maximale (un nombre ou une date) de l'objet. Elle ne doit pas être inférieure à la valeur minimale (attribut min).

maxlength HTML5

Si la valeur de l'attribut type est text, email, search, password, tel, ou url, cet attribut définit le nombre maximum de caractère (en points de code Unicode) que l'utilisateur peut saisir. Pour les autres types il est ignoré. Cette valeur peut être supérieure à la valeur de l'attribut size. Si cet attribut n'est pas spécifié, l'utilisateur peut saisir un nombre illimité de caractères. Donner une valeur négative à cet attribut produira l'effet par défaut. La contrainte n'est évaluée que lorsque la valeur de l'attribut a été changée.

min HTML5

La valeur minimale (du nombre ou de la date et heure) pour cet objet. Elle ne peut être supérieure à la valeur de l'attribut max.

multipleHTML5

Cet attribut booléen indique si oui ou non, l'utilisateur peut saisir plus d'une valeur. L'attribut s'applique dans le cas où l'attribut type vaut email ou file, dans les autres cas il est ignoré.

name

Le nom du contrôle qui est envoyé avec les données du formulaire.

patternHTML5

Une expression régulière qui sert à vérifier la valeur. Le motif doit correspondre au contenu entier et pas seulement à un fragment. L'attribut title peut être utilisé pour décrire le motif et fournir une aide l'utilisateur. Cet attribut ne s'applique uniquement lorsque la valeur de l'attribut type est text, search, tel, url ou email. Le langage d'expressions régulières utilisé est le même que celui utilisé en JavaScript. Le motif n'est pas entouré par des slashs.

placeholder HTML5

Une indication pour l'utilisateur sur ce qui peut être saisi dans le contrôle. Ce texte ne doit pas contenir de sauts de lignes ni de retours chariots. Cet attribut ne s'applique seulement lorsque la valeur de l'attribut type est text, search, tel, url ou email.

Note : L'attribut placeholder ne doit pas être utilisé à la place d'un élément <label>. Leurs fonctions sont différentes : l'élément <label> décrit le rôle du formulaire et indique le genre d'information qui est attendu, l'attribut placeholder est une indication sur le format que le contenu devrait respecter. Dans certains cas, l'attribut  placeholder n'est jamais affiché et le formulaire doit donc être compréhensible sans cet attribut.

readonly

Cet attribut booléen indique si l'utilisateur peut modifier ou non la valeur du contrôle.

HTML5 Cet attribut est ignoré si la valeur de l'attribut type est hidden, range, color, checkbox, radio, file, ou un bouton.

required HTML5

Cet attribut indique que l'utilisateur doit renseigner la valeur avant d'envoyer le formulaire. Il ne peut pas être utilisé lorsque la valeur de l'attribut type est hidden, image, ou un bouton (submit, reset, ou button). Les pseudo-classes CSS :optional et :required seront appliquées de manière correspondantes.

selectionDirection HTML5

La direction dans laquelle la sélection s'effectue. Les valeurs possibles sont forward, backward ou none. forward est utilisé dans les cas où la sélection est faite dans le sens du texte (de droite à gauche dans les locales dont la lecture se fait de droite à gauche, de gauche à droite dans les locales où la lecture se fait de gauche à droite) ; backward est utilisé pour le cas inverse ; none  est utilisé quand le sens de la sélection est inconnu.

size

La taille initiale du contrôle. Cette valeur est en pixels sauf dans les cas où l'attribut type vaut text ou password. Dans ces cas la valeur est le nombre de caractères. À partir de HTML5, cet attribut ne s'applique que lorsque l'attribut type vaut text, search, tel, url, email, ou password (il est ignoré dans les autres cas). Par ailleurs, la taille doit être strictement positive. La taille par défaut utilisée est 20.

spellcheck HTML5

Si cet attribut vaut true, cela indique que l'orthographe et la grammaire de l'élément doivent être vérifiés. La valeur default indique que le comportement à respecter est celui par défaut, éventuellement défini par la valeur de l'attribut spellcheck de l'élément parent. La valeur false indique qu'aucune vérification ne doit être effectuée sur l'élément.

src

Si la valeur de l'attribut type est image, cet attribut définit un URI pour l'adresse de l'image à afficher sur le bouton graphique. Dans les autres cas il est ignoré.

step HTML5

Fonctionne avec les attributs min et max pour limiter l'incrément qui peut être utilisé pour fixer une valeur numérique ou une date. Cet attribut peut prendre la valeur any ou un nombre flottant positif. Si cet attribut ne vaut pas any, le contrôle acceptera seulement les valeurs dont la différence avec la valeur minimale est un multiple de l'attribut.

tabindex spécifique à cet élément en HTML 4, global en HTML5

La position de l'élément lors du déplacement à la tabulation dans le document courant.

usemap HTML 4 seulement, Obsolète depuis HTML5

Le nom de l'élément <map> à utiliser comme une carte d'image.

value

La valeur initiale du contrôle. Cet attribut est optionnel sauf quand la valeur de l'attribut type est radio ou checkbox.
Il faut noter que lorsque la page est rechargée, Gecko et Internet Explorer ignoreront la valeur contenue dans le code source HTML si la valeur a été changée avant l'actualisation.

width HTML5

Si la valeur de l'attribut type est image, cet attribut définit la largeur de l'image à afficher pour le bouton.

x-moz-errormessage

Une extension Mozilla qui permet de définir le message d'erreur à afficher lorsque le champ n'est pas validé correctement.

Notes

Gestion des fichiers

Vous ne pouvez pas définir la valeur d'un champ de sélection de fichier depuis un script ; par exemple, le bout de code suivant n'aura aucun effet :

var e = getElementById("someFileInputElement");
e.value = "foo";

Messages d'erreurs

Si vous souhaitez que Firefox affiche un message d'erreur sur mesure lorsqu'un champ n'est pas valide, vous pouvez utiliser l'attribut x-moz-errormessage :

<input type="email" x-moz-errormessage="Veuillez entrer une adresse e-mail valide..">

Il faut cependant noter que cela n'est pas standard et n'aura donc pas d'effet sur les autres navigateurs.

Exemple

Un champ input simple

<!-- Utilisation simple d'un élément input -->
<input type="text" name="input" value="Entrez du texte ici">

Un exemple souvent utilisé

<!--Un formulaire habituel utilisant les éléments input-->
<form action="getform.php" method="get">
       Prénom : <input type="text" name="first_name" /><br />
          Nom : <input type="text" name="last_name" /><br />
Adresse e-mail: <input type="email" name="user_email" /><br />
<input type="submit" value="Enregistrer" />
</form>

Utiliser mozactionhint sur Firefox mobile

Vous pouvez utiliser l'attribut mozactionhint pour définir le texte contenu dans la touche d'entrée du clavier virtuel lorsque le formulaire est utilisé par Firefox Mobile. Par exemple, pour avoir un bouton avec le texte « Next » affiché, vous pouvez faire cela :

<input type="text" mozactionhint="next" name="sometext" />

Le résultat sera alors :

Spécifications

Compatibilités des navigateurs

Notes relatives à Gecko

À partir de Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6), Firefox pour Android permet aux utilisateurs de prendre des photographies avec l'appareil photo du terminal et de les uploader sans quitter le navigateur. Les développeurs web peuvent implémenter simplement cette fonctionnalité en spécifiant l'attribut accept avec une valeur image/* sur l'élément input de type file :

<input type="file" accept="image/*">

Voir également

• HTML5 placeholder text multi-navigateurs
• HTMLInputElement