Le tag<input> est utilisé dans les cadres de l’élément <form>, en spécifiant les champs, où les utilisateurs peuvent saisir les données. La type de champ (texte, un bouton radio, une case à cocher, un champ pour saisir un mot de passe, etc.) est spécifié par la valeur de l’attribut type. Pour lier un texte à un élément spécifique, on utilise le tag <label>, qui définit une étiquette de texte pour celui-ci.

Syntaxe

Le tag <input> est seul; le tag fermant n’est pas nécessaire. (En XHTML le tag fermant <input/> est requis). Le tag ne contient pas de contenu de texte, il contient uniquement des attributs.

Exemple

<!DOCTYPE html>
<html>
   <head>
      <title>Titre du document</title>
   </head>
   <body>
      <form action="getform.php" method="get">
   Votre Prénom: <input type="text" name="first_name" />
         Votre Nom: <input type="text" name="last_name" />
         Entrez Votre E-Mail: <input type="email" name="user_email" />
         <input type="submit" value="Envoyer" />
      </form>
   </body>
</html>

Résultat

Forme de saisie

Attributs


L'attribut principal qui détermine le type du champ d'entrée est type. S'il n'y a pas d'attribut, la valeur par défaut est "text".

Attribut Valeur Description
accept audio/*
video/*
image/*
MIME_type
Indique les types des fichiers, que vous pouvez envoyer via le champ de chargement des fichier. (Utilisé avec l’attribut type="file").
align left
right
top
middle
bottom
Spécifie le type d’alignement de l’image. (Utilisé uniquement avec des image).
Non supporté en HTML5.
alt text Installe un texte alternatif pour des images. (Utilisé uniquement avec des images).
autocomplete on
off
Active/Désactive le remplissage automatique
Nouvel attribut en HTML5.
autofocus autofocus Indique, que le champ du formulaire doit recevoir le focus après le chargement de la page.
Nouvel attribut en HTML5.
checked checked Indique que l'élément doit être présélectionné lors du chargement de la page (Utilisé uniquement pour <input type = "checkbox"> et <input type = "radio">).
disabled disabled Indique, que l’élément doit être indisponible pour interagir avec l’utilisateur.
form form_id Spécifie le formulaire (défini par l'élément <form>) auquel le contrôle s'applique. La valeur est l'id du formulaire dans le même document.
Nouvel attribut en HTML5.
formaction URL Spécifie l'adresse où les données du formulaire seront envoyées lorsque le bouton est pressé. (Utilisé uniquement pour<input type = "image"> et <input type = "submit">).
formenctype application/x-www-form-
urlencoded
multipart/form-data
text/plain
Définit comment encoder les données du formulaire avant de l'envoyer au serveur. (Utilisé uniquement pour <input type = "image"> et <input type = "submit">). Tous les symboles sont codés avant l’envoi (valeur par défaut). Les symboles ne sont pas codés, les espaces sont remplacés par un signe "+", mais les caractères ne sont pas codés.
formmethod Spécifie la méthode de requête HTTP qui sera utilisée lors de l'envoi des données de formulaire. (Utilisé uniquement pour <input type = "image"> et <input type = "submit">)
get - Soumettre les données du formulaire dans la barre d'adresse ("nom = valeur"), qui sont ajoutées à l'URL de la page après le point d'interrogation et sont séparées par une esperluette (&). (http://example.ru/doc/?name=Ivan&password=vanya)
post - Le navigateur communique avec le serveur et envoie les données pour traitement.
formnovalidate formnovalidate Indique que vous n'avez pas besoin de vérifier l'exactitude des données. (Utilisé uniquement pour <input type = "submit">).
formtarget Spécifie où afficher la réponse après la soumission du formulaire. (Utilisé uniquement pour <input type = "image"> et <input type = "submit">).
-blank Ouvre la réponse dans une nouvelle fenêtre.
_self Ouvre la réponse dans une fenêtre courante.
_parent Ouvre la réponse dans un cadre parental.
_top Ouvre la réponse en pleine largeur de la fenêtre.
height pixels Spécifie la hauteur de l’élément. (Utilisé uniquement pour <input type = "image">)
inputmode verbatim
latin
latin-name
latin-prose
full-width-latin
kana
katakana
numeric
tel
email
url
Définit la disposition du clavier.
list datalist_id Définit une liste d'options parmi lesquelles l'utilisateur peut choisir. La valeur de l'attribut est l'ID de l'élément <datalist>. З
max number
date
Définit la valeur supérieure pour la saisie d'un numéro ou d'une date.
maxlength number Spécifie le nombre maximal de caractères qu'un utilisateur peut entrer.
min number
date
Spécifie la valeur minimale pour entrer un numéro ou une date.
multiple multiple Indique que l'utilisateur peut entrer plusieurs valeurs dans l'élément (uniquement pour <input type = "file"> et <input type = "email">).
name text Définit le nom de l'élément. (utilisé pour identifier le formulaire).
pattern regexp Spécifie une expression régulière qui requiert que vous saisissiez et vérifiiez des données dans le champ de formulaire (contrôles text, search, tel, url, email et password).
placeholder text Définit un court indicateur décrivant la valeur attendue pour le champ de saisie. L'utilisateur voit un indice dans le champ de saisie. Il disparaît lorsque l'utilisateur commence à saisir des données ou lorsque le champ reçoit le focus.
readonly readonly Indique que le champ de saisie est en lecture seule. L'utilisateur ne peut pas apporter de modifications.
required required Indique que le champ de saisie doit être rempli avant de soumettre le formulaire.
selectionDirection forward
backward
none
Définit la direction dans laquelle la sélection est effectuée.
size number Définit la largeur de la zone de texte. (Seulement pour text, search, tel, url, email et password). La valeur par défaut est 20 caractères.
src URL Spécifie le chemin d'accès à l'image utilisée comme bouton "Envoyer". (Utilisé uniquement pour <input type = "image"> )
step number Spécifie l'incrément d'incrémentation (valeur d'incrémentation) pour les champs numériques. Utilisé avec les attributs min et max, qui définissent les valeurs minimum et maximum.
type button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
Définit le type du champ de saisie.
value text Définit la valeur de l’élément.
width width Spécifie la largeur de l’élément (pour <input type = "image"> unquement).

Le tag <input> supporte également les Attributs globaux et les Attributs d'événements.

Valeurs

Valeur Description
button Spécifie le bouton actif.
checkbox Spécifie les cases à cocher (l'utilisateur peut sélectionner plusieurs options parmi celles proposées).
color Définit une palette de couleurs (l'utilisateur peut sélectionner des valeurs de couleur au format hexadécimal).
date Spécifie le champ pour entrer la date du calendrier.
datetime Spécifie le champ pour entrer la date et l’heur.
datetime-local Spécifie le champ pour entrer la date et l'heure sans le fuseau horaire.
e-mail Spécifie le champ de saisie de l'adresse électronique.
file Spécifie le contrôle avec le bouton "Parcourir", en cliquant sur lequel vous pouvez sélectionner et télécharger le fichier.
hidden Spécifie le champ de saisie masqué. L'utilisateur ne peut pas le voir.
image Indique qu'une image est utilisée à la place d'un bouton pour envoyer des données au serveur. Le chemin d'accès à l'image est indiqué par l'attribut src. De plus, l'attribut alt peut être utilisé pour spécifier un autre texte, les attributs height et width pour spécifier la hauteur et la largeur de l'image.
month Spécifie le champ de sélection du mois, après quoi les données seront entrées sous la forme d'un mois-année (par exemple: 2018-07).
number Définit un champ pour entrer des nombres.
password Définit un champ pour saisir le mot de passé (les symboles d'entrée sont indiqués par des astérisques, des points ou d'autres caractères).
radio Crée des boutons radio (si vous sélectionnez un bouton radio, tous les autres deviennent inactifs)
range Crée un curseur pour sélectionner des nombres dans la plage spécifiée. La plage par défaut est comprise entre 0 et 100. La plage de nombres est spécifiée par les attributs min et max.
reset Définit un bouton pour réinitialiser les informations.
search Crée un champ de texte pour la recherche.
submit Crée un bouton de soumission pour les données du formulaire (bouton "envoyer").
text Crée un champ de texte sur une seule ligne.
time Spécifie un champ numérique pour la saisie de l’heure au format 24 heures (par exemple, 13 :45)
url Crée un champ pour entrer l’URL.
week Crée un champ pour sélectionner la semaine, après quoi les données sont entrées dans le format semaine-semaine (par exemple, 2018-W25).

Comment styler le tag HTML <input> ?

Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <input>:

Coloration du texte dans le tag HTML <input>:

Styles de mise en page du texte pour la tag HTML <input>:

Autres propriétés utiles pour le tag HTML <input>:

Support de Navigateurs

chrome edge firefox safari opera

Pratiquez vos connaissances

Quels sont les différents types de valeurs que vous pouvez utiliser pour le tag <input> en HTML?
Trouvez-vous cela utile?