Balise HTML <input>
La balise <input> est utilisée dans l’élément <form> et définit des champs de saisie pour l’utilisateur. Le type du champ (texte, case à cocher, bouton radio, champ de mot de passe, etc.) est déterminé par la valeur de l’attribut type. La balise n’a pas de contenu textuel, elle contient uniquement des attributs.
Elle appartient à un groupe de balises appelé éléments de formulaire.
Pour associer un texte à un élément spécifique, on utilise la balise <label>, qui lui attribue une étiquette textuelle.
Syntaxe
La balise <input> est vide, ce qui signifie que la balise de fermeture 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>
html
<!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>
html
<!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>Résultat
Attributs
L’attribut principal qui détermine le type du 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éversement 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 de l’image. (Utilisé uniquement avec les images). |
| autocomplete | on off | Active/désactive l’autocomplétion. 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é lorsque la page se charge. (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>) du contrôle. La valeur est l’identifiant du formulaire (id) 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 d’être envoyées 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 (aucun encodage, utilisé pour les téléversements 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 l’envoi 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 | 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’identifiant 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 symboles 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 vous devez saisir et vérifier les données dans le champ du 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é en lecture seule. L’utilisateur ne peut pas effectuer de modifications. |
| required | required | Indique que le champ de saisie doit être rempli avant l’envoi 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 de 20 caractères. |
| src | URL | Indique le chemin vers l’image utilisée comme bouton « envoyer ». (Utilisé uniquement pour <input type = "image">). |
| step | number | Définit le pas d’incrémentation (valeur d’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 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énement.
Valeurs de l’attribut type
| Valeur | Description |
|---|---|
| button | Définit le bouton actif. |
| checkbox | Coche des cases (l’utilisateur peut sélectionner plus d’une option). |
| 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 du 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 l’e-mail. | |
| file | Définit le contrôle avec le bouton Parcourir, en cliquant sur lequel vous pouvez sélectionner et charger le fichier. |
| hidden | Définit un champ de saisie masqué. Il n’est pas visible pour 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, et 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 la forme année-mois (par exemple : 2018-07). |
| number | Définit le champ de saisie pour les nombres. |
| password | Définit un champ pour saisir 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’on choisit un bouton radio, tous les autres seront 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 des 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 d’envoi des 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 saisir l’heure au format 24 heures (par exemple, 13:45). |
| url | Crée un champ de saisie pour l’URL. |
| week | Crée un champ pour sélectionner la semaine, après quoi les données seront affichées sous la forme année-semaine (par exemple : 2018-W25). |
Practice
What can be achieved with the HTML <input> tag?