Tag HTML <input>

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

Résultat

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>:

La propriété CSS font-style définit le style de la police: normal | italic | oblique | initial | inherit
La propriété CSS font-family spécifie une liste priorisée d’un ou plusieurs noms de famille de police et/ou noms de famille génériques pour l’élément sélectionné.
La propriété CSS font-size définit la taille de la police.
La propriété CSS font-weight définit si la police doit être en gras ou épaisse.
La propriété CSS text-transform contrôle le cas de texte et la capitalisation.
La propriété CSS text-decoration spécifie la décoration ajoutée au texte, et est une propriété raccourcie pour les propriétés CSS text-decoration-line, text-decoration-color, text-decoration-style.

Coloration du texte dans le tag HTML <input>:

La propriété CSS color décrit la couleur du contenu et les décorations du texte.
La propriété CSS background-color définit la couleur de fond d’un élément.

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

La propriété CSS text-indent spécifie l’indentation de la première ligne dans un bloc de texte.
La propriété CSS text-overflow spécifie comment le contenu qui n’est pas affiché doit être signalé à l’utilisateur.
La propriété CSS white-space spécifie comment l’espace blanc à l’intérieur d’un élément est géré.
La propriété CSS word-break spécifie où les lignes doivent être cassées.

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

La propriété CSS text-shadow ajoute des ombres au texte.
La propriété CSS text-align-last définit l’alignement de la dernière ligne du texte.
La propriété CSS line-height spécifie la hauteur d’une ligne.
La propriété CSS letter-spacing définit les espaces entre les lettres/caractères d’un texte.
La propriété CSS word-spacing permet de définir l’espacement entre les mots.