Balise HTML <input>
La balise <input> est utilisée dans les formulaires HTML pour définir le champ où l'utilisateur peut saisir des données. Description, attributs et exemples.
La balise <input> est utilisée à l'intérieur de l'élément <form> et définit les champs destinés à la saisie de l'utilisateur. Le type de champ — zone de texte, case à cocher, bouton radio, champ de mot de passe, sélecteur de fichier, et bien d'autres — est déterminé par la valeur de l'attribut type. L'élément est vide : il ne contient aucun texte et ne porte que des attributs.
<input> appartient au groupe des éléments de formulaire, et c'est l'une des balises les plus utilisées sur les pages interactives. Presque chaque boîte de connexion, barre de recherche et formulaire d'inscription est construit à partir d'un ou plusieurs éléments <input>.
Pour étiqueter un champ afin que les utilisateurs (et les technologies d'assistance) sachent à quoi il sert, associez-le à une balise <label>. Pour transformer une saisie en action — soumission ou réinitialisation du formulaire — utilisez une entrée submit/reset ou l'élément <button>.
Cette page couvre la syntaxe, chaque valeur de type avec des exemples exécutables, la façon dont les paires name/value sont soumises, l'association des étiquettes et la validation HTML intégrée.
Syntaxe
La balise <input> est vide, ce qui signifie que la balise fermante n'est pas requise. Mais en XHTML, la balise (<input>) doit être fermée (<input/>).
Exemple de la balise HTML <input> :
Exemple de la balise HTML <input>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="get">
<input type="email" name="user_email" placeholder="Enter your email" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Exemple de la balise HTML <input> avec la balise HTML <label> :
Exemple de la balise HTML <input> avec la balise HTML <label>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.form-group { margin-bottom: 10px; }
</style>
</head>
<body>
<form action="/form/submit" method="get">
<div class="form-group">
<label for="first_name">Your Name:</label>
<input type="text" id="first_name" name="first_name" />
</div>
<div class="form-group">
<label for="last_name">Your Surname:</label>
<input type="text" id="last_name" name="last_name" />
</div>
<div class="form-group">
<label for="user_email">Enter Your E-Mail:</label>
<input type="email" id="user_email" name="user_email" />
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>Associer une étiquette à un champ de saisie
Une simple zone de saisie ne donne aucune indication à l'utilisateur sur ce qu'il doit taper. La balise <label> résout ce problème, et va au-delà d'un simple affichage de texte :
- Les lecteurs d'écran annoncent l'étiquette lorsque le champ reçoit le focus, permettant aux utilisateurs de technologies d'assistance de savoir ce que le champ attend.
- La zone cliquable s'agrandit. Cliquer sur le texte de l'étiquette met le focus sur le champ (et bascule une case à cocher ou un bouton radio). C'est un grand avantage en termes d'utilisabilité pour les petites cases à cocher.
Il existe deux façons d'associer une étiquette à un champ de saisie :
1. Explicite — for correspond à id. L'attribut for de l'étiquette doit être égal à l'id du champ :
<label for="username">Username:</label>
<input type="text" id="username" name="username" />2. Implicite — envelopper le champ à l'intérieur de l'étiquette. Aucun id/for n'est nécessaire :
<label>
Username:
<input type="text" name="username" />
</label>Préférez la forme explicite lorsque votre mise en page CSS sépare l'étiquette et le champ. Dans tous les cas, donnez une étiquette à chaque champ — l'attribut placeholder n'est pas un substitut, car l'indice disparaît dès que l'utilisateur commence à saisir.
Attributs
L'attribut principal qui détermine le type de champ de saisie est type. Si l'attribut est absent, la valeur par défaut est « text ».
| Attribut | Valeur | Description |
|---|---|---|
| accept | audio/* video/* image/* MIME_type | Spécifie les types de fichiers que vous pouvez envoyer via le champ de téléchargement de fichiers. (Utilisé avec type="file"). |
| align | left right top middle bottom | Définit le type d'alignement de l'image. (Utilisé uniquement avec les images). Non pris en charge en HTML5. |
| alt | text | Définit le texte alternatif pour l'image. (Utilisé uniquement avec les images). |
| autocomplete | on off | Active/désactive la saisie automatique. Nouvel attribut en HTML5. |
| autofocus | autofocus | Indique que le champ de 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 ne doit pas être disponible pour l'interaction de l'utilisateur. |
| form | form_id | Indique le formulaire (spécifié par l'élément <form>) de l'élément de contrôle. La valeur est l'identifiant (id) du formulaire dans le même document. Nouvel attribut en HTML5. |
| formaction | URL | Spécifie l'adresse vers laquelle les données du formulaire seront envoyées lors du clic sur le bouton. (Utilisé uniquement pour <input type = "image"> et <input type = "submit">). |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | Détermine comment les données du formulaire sont encodées avant de les envoyer au serveur. (Utilisé uniquement avec <input type="image"> et <input type="submit">). Valeurs : application/x-www-form-urlencoded (par défaut, encode tous les caractères), multipart/form-data (pas d'encodage, utilisé pour les téléchargements de fichiers), text/plain (les espaces deviennent +, les autres caractères ne sont pas encodés). |
| formmethod | get post | Indique la méthode de requête HTTP qui sera utilisée lors de l'envoi des données du formulaire. (Utilisé uniquement pour <input type = "image"> et <input type = "submit">). get envoie les données du formulaire dans la barre d'adresse. post envoie les données au serveur pour traitement. |
| formnovalidate | formnovalidate | Indique qu'il n'est pas nécessaire de vérifier l'exactitude des données. (Utilisé uniquement pour <input type = "submit">). |
| formtarget | _blank _self _parent _top | Spécifie où afficher la réponse après la soumission du formulaire. (Utilisé uniquement pour <input type = "image"> et <input type = "submit">). |
| height | pixels | Définit la hauteur de l'élément (utilisé uniquement pour <input type = "image">). |
| inputmode | none text decimal numeric tel search email url | Suggère la disposition du clavier virtuel à afficher sur les appareils tactiles (par exemple, numeric affiche un pavé numérique). |
| 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 maximale pour la saisie d'un nombre ou d'une date. |
| maxlength | number | Définit le nombre maximal de caractères que l'utilisateur peut saisir. |
| min | number date | Définit la valeur minimale pour la saisie d'un nombre ou d'une date. |
| multiple | multiple | Indique que l'utilisateur peut saisir plus d'une valeur 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 l'identification du formulaire). |
| pattern | regular expression | Spécifie une expression régulière selon laquelle les données doivent être saisies et vérifiées dans le champ de formulaire. (Uniquement pour les éléments de contrôle text, search, tel, url, email et password). |
| placeholder | text | Définit une courte invite qui décrit 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 | Définit que le champ de saisie est activé uniquement pour la lecture. L'utilisateur ne peut pas effectuer de modifications. |
| required | required | Indique que le champ de saisie doit être rempli avant la soumission du formulaire. |
| size | number | Définit la largeur visible du champ de texte en caractères. (Uniquement pour text, search, tel, url, email et password). La valeur par défaut est 20 caractères. |
| src | URL | Indique le chemin vers l'image utilisée comme bouton « envoyer ». (Uniquement pour <input type = "image">). |
| step | number | Définit l'incrément pour les champs numériques. Utilisé avec les attributs min et max qui définissent les valeurs minimale et maximale. |
| type | button checkbox color date datetime (deprecated) 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 | Définit la largeur de l'élément (uniquement pour <input type = "image">). |
La balise <input> prend également en charge les attributs globaux et les attributs d'événements.
Valeurs de l'attribut type
| Valeur | Description |
|---|---|
| button | Définit un bouton actif. |
| checkbox | Cases à cocher (l'utilisateur peut sélectionner plusieurs options). |
| color | Spécifie une palette de couleurs (l'utilisateur peut sélectionner des valeurs de couleur en hexadécimal). |
| date | Définit le champ de saisie pour une date de calendrier. |
| datetime (deprecated) | Définit le champ de saisie pour la date et l'heure. (Obsolète en HTML5, utilisez datetime-local à la place.) |
| datetime-local | Définit le champ de saisie pour la date et l'heure sans fuseau horaire. |
| Définit le champ de saisie pour une adresse e-mail. | |
| file | Définit le contrôle avec un bouton Parcourir, en cliquant dessus vous pouvez sélectionner et charger le fichier. |
| hidden | Définit un champ de saisie masqué. Il n'est pas visible par l'utilisateur. |
| image | Indique qu'une image est utilisée à la place d'un bouton pour envoyer des données au serveur. Le chemin vers l'image est indiqué par l'attribut src. L'attribut alt peut également être utilisé pour spécifier un texte alternatif, les attributs height et width pour spécifier la hauteur et la largeur de l'image. |
| month | Définit le champ de sélection d'un mois, après quoi les données seront affichées sous forme année-mois (par exemple : 2018-07). |
| number | Définit le champ de saisie pour les nombres. |
| password | Définit un champ pour la saisie d'un mot de passe (les caractères saisis sont affichés sous forme d'astérisques, de points ou d'autres caractères). |
| radio | Crée un bouton radio (lorsqu'un bouton radio est sélectionné, tous les autres sont désactivés). |
| range | Crée un curseur pour sélectionner des nombres dans la plage spécifiée. La plage par défaut est de 0 à 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 des données du formulaire (bouton « submit »). |
| 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 de saisie pour une URL. |
| week | Crée un champ pour la sélection de la semaine, après quoi les données seront affichées sous forme année-semaine (par exemple : 2018-W25). |
Exemples des types de saisie courants
La valeur de type modifie à la fois l'apparence et le comportement d'un champ. Voici ceux que vous utiliserez le plus souvent.
Cases à cocher et regroupement avec name
Une case à cocher permet à l'utilisateur d'activer ou de désactiver une option. Utilisez checked pour la présélectionner. Lorsque plusieurs cases à cocher partagent le même name, elles forment un groupe, et chaque case cochée est soumise séparément sous la forme name=value :
<form>
<label><input type="checkbox" name="topping" value="cheese" checked /> Cheese</label>
<label><input type="checkbox" name="topping" value="bacon" /> Bacon</label>
<label><input type="checkbox" name="topping" value="onion" /> Onion</label>
</form>Soumettre le formulaire avec Cheese et Onion cochés envoie topping=cheese&topping=onion.
Boutons radio (même name)
Les boutons radio qui partagent le même name sont mutuellement exclusifs — sélectionner l'un désactive les autres. Définissez toujours un value sur chacun pour que le serveur sache quelle option a été choisie :
<form>
<p>Choose a size:</p>
<label><input type="radio" name="size" value="s" /> Small</label>
<label><input type="radio" name="size" value="m" checked /> Medium</label>
<label><input type="radio" name="size" value="l" /> Large</label>
</form>Téléchargement de fichier
type="file" ajoute un bouton Parcourir. Ajoutez accept pour filtrer le sélecteur de fichiers et multiple pour permettre la sélection de plusieurs fichiers :
<form>
<label for="avatar">Profile picture:</label>
<input type="file" id="avatar" name="avatar" accept="image/*" />
</form>Nombre avec min, max et step
type="number" affiche un champ numérique avec des flèches d'incrément. min/max délimitent la plage et step définit l'incrément (utilisez step="0.01" pour les devises, step="any" pour autoriser n'importe quelle décimale) :
<form>
<label for="qty">Quantity (1–10):</label>
<input type="number" id="qty" name="qty" min="1" max="10" step="1" value="1" />
</form>Curseur de plage
type="range" est un curseur pour une valeur approximative que l'utilisateur n'a pas besoin de voir exactement. Il utilise les mêmes attributs min, max et step :
<form>
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="5" value="50" />
</form>Mot de passe
type="password" masque les caractères saisis. La valeur est toujours envoyée en texte clair, le formulaire doit donc être soumis via HTTPS :
<form>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd" minlength="8" required />
</form>Comment name et value sont soumis
Lorsqu'un formulaire est soumis, le navigateur construit une chaîne de requête de paires name=value à partir de ses contrôles. Le rôle de value dépend du type de saisie :
- Champs de type texte (
text,email,url,password,number,search,tel) :valueest le texte par défaut affiché dans la zone ; ce que l'utilisateur tape le remplace et est soumis. - Radio et case à cocher :
valueest la donnée envoyée uniquement lorsque ce contrôle est coché. Une case non cochée ne soumet rien du tout. C'est pourquoi chaque option a besoin de sa proprevalue. - Submit et bouton :
valueest le libellé imprimé sur le bouton. Un bouton submit nommé envoie également sa pairename=value, ce qui permet au serveur de savoir quel bouton a été pressé.
Un champ sans name n'est jamais soumis — il peut toujours être utile pour les scripts côté client, mais le serveur ne le verra jamais.
Validation de formulaire
Les navigateurs peuvent valider les champs avant l'envoi du formulaire, sans JavaScript. Si un champ échoue, le navigateur bloque la soumission et affiche un message. Les principaux outils sont :
required— le champ ne doit pas être vide.type="email"/type="url"— la valeur doit être une adresse e-mail ou une URL syntaxiquement valide.pattern— une expression régulière à laquelle la valeur doit correspondre (fonctionne pour text, search, tel, url, email, password).min/max/step— limites de plage numérique et de date.minlength/maxlength— limites de longueur de chaîne.
Cet exemple les combine. Essayez de le soumettre vide, puis avec des données incorrectes :
<!DOCTYPE html>
<html>
<head>
<title>Form validation</title>
<style>
.form-group { margin-bottom: 10px; }
label { display: block; }
</style>
</head>
<body>
<form action="/form/submit" method="post">
<div class="form-group">
<label for="email">Email (required):</label>
<input type="email" id="email" name="email" required />
</div>
<div class="form-group">
<label for="site">Website (must start with https://):</label>
<input type="url" id="site" name="site" pattern="https://.*" placeholder="https://example.com" />
</div>
<div class="form-group">
<label for="zip">ZIP code (5 digits):</label>
<input type="text" id="zip" name="zip" pattern="[0-9]{5}" maxlength="5" required />
</div>
<div class="form-group">
<label for="age">Age (18–99):</label>
<input type="number" id="age" name="age" min="18" max="99" step="1" required />
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>Pour ignorer cette vérification intégrée pour un bouton submit particulier, ajoutez formnovalidate. Pour cibler un champ avec CSS, les pseudo-classes :valid, :invalid et :required correspondent à l'état de validation. Pour en savoir plus sur la configuration des formulaires et leur soumission, consultez la balise <form>.