HTML Types d'entrée
Ce chapitre décrit les différents types de l'élément HTML <input>.
HTML Types d'entrée
Voici les différents types d'entrée que vous pouvez utiliser en HTML :
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">
Astuce : La valeur par défaut de l'attribut type est "text".
Texte du type de saisie
<input type="text"> définit un champ de saisie de texte sur une seule ligne :
Exemple
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Try it Yourself »
Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
First name:
Last name:
Type d'entrée Mot de passe
<input type="password"> définit un champ de mot de passe :
Exemple
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
Try it Yourself »
Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
Username:Password:
Les caractères d'un champ de mot de passe sont masqués (affichés sous forme d'astérisques ou de cercles).
Type d'entrée Soumettre
<input type="submit"> définit un bouton pour soumettre les données du formulaire à un gestionnaire de formulaire.
Le gestionnaire de formulaire est généralement une page de serveur avec un script pour traiter les données d'entrée.
Le gestionnaire de formulaire est spécifié dans l'attribut action du formulaire :
Exemple
<form action="/action_page.html">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Try it Yourself »
Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
Si vous omettez l'attribut value du bouton soumis, le bouton obtiendra un texte par défaut :
Exemple
<form action="/action_page.html">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
Try it Yourself »
Réinitialisation du type d'entrée
<input type="reset"> définit un bouton de réinitialisation qui réinitialisera toutes les valeurs du formulaire à leurs valeurs par défaut :
Exemple
<form action="/action_page.html">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
Try it Yourself »
Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
Si vous modifiez les valeurs d'entrée puis cliquez sur le bouton "Réinitialiser", les données du formulaire seront réinitialisées aux valeurs par défaut.
Type d'entrée Radio
<input type="radio"> définit un bouton radio.
Les boutons radio permettent à un utilisateur de sélectionner UNIQUEMENT UN choix parmi un nombre limité de choix :
Exemple
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Try it Yourself »
Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
Case à cocher Type d'entrée
<input type="checkbox"> définit une case à cocher.
Les cases à cocher permettent à un utilisateur de sélectionner ZÉRO ou PLUS d'options parmi un nombre limité de choix.
Exemple
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Try it Yourself »
Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
Bouton de type d'entrée
<input type="button"> définit un bouton :
Exemple
<input type="button" onclick="alert('Gloire à l’Ukraine !!')" value="Cliquez sur moi !">
Try it Yourself »
Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
Type d'entrée Couleur
Le <input type="color"> est utilisé pour les champs de saisie qui doivent contenir une couleur.
En fonction de la prise en charge du navigateur, un sélecteur de couleurs peut apparaître dans le champ de saisie.
Exemple
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
Try it Yourself »
Type d'entrée Date
Le <input type="date"> est utilisé pour les champs de saisie qui doivent contenir une date.
En fonction de la prise en charge du navigateur, un sélecteur de date peut apparaître dans le champ de saisie.
Exemple
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
Try it Yourself »
Vous pouvez également utiliser les attributs min et max pour ajouter des restrictions aux dates :
Exemple
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
Try it Yourself »
Type d'entrée Dateheure-locale
Le <input type="datetime-local"> spécifie un champ de saisie de date et d'heure, sans fuseau horaire.
Selon la prise en charge du navigateur, un sélecteur de date peut apparaître dans le champ de saisie.
Exemple
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
Try it Yourself »
Type d'entrée E-mail
Le <input type="email"> est utilisé pour les champs de saisie qui doivent contenir une adresse e-mail.
En fonction de la prise en charge du navigateur, l'adresse e-mail peut être automatiquement validée lors de la soumission.
Certains smartphones reconnaissent le type d'e-mail et ajoutent « .com » au clavier pour correspondre à la saisie de l'e-mail.
Exemple
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
Try it Yourself »
Fichier de type d'entrée
Le <input type="file"> définit un champ de sélection de fichier et un bouton « Parcourir » pour les téléchargements de fichiers.
Exemple
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
Try it Yourself »
Type d'entrée masqué
Le <input type="hidden"> définit un champ de saisie masqué (non visible pour un utilisateur).
Un champ masqué permet aux développeurs Web d'inclure des données qui ne peuvent pas être vues ou modifiées par les utilisateurs lorsqu'un formulaire est soumis.
Un champ masqué stocke souvent l'enregistrement de la base de données qui doit être mis à jour lorsque le formulaire est soumis.
Remarque : Bien que la valeur ne soit pas affichée à l'utilisateur dans le contenu de la page, elle est visible (et peut être modifiée) à l'aide des outils de développement de n'importe quel navigateur ou de la fonctionnalité « Afficher la source ». N'utilisez pas d'entrées cachées comme forme de sécurité !
Exemple
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>
Try it Yourself »
Type d'entrée Mois
Le <input type="month"> permet à l'utilisateur de sélectionner un mois et une année.
Selon la prise en charge du navigateur, un sélecteur de date peut apparaître dans le champ de saisie.
Exemple
<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
Try it Yourself »
Numéro du type d'entrée
Le <input type="number"> définit un champ de saisie numérique.
Vous pouvez également définir des restrictions sur les numéros acceptés.
L'exemple suivant affiche un champ de saisie numérique, dans lequel vous pouvez saisir une valeur comprise entre 1 et 5 :
Exemple
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
Try it Yourself »
Restrictions de saisie
Voici une liste de quelques restrictions de saisie courantes :
| Attribut | Description |
|---|---|
| checked | Spécifiez qu'un champ de saisie doit être présélectionné lors du chargement de la page (par exemple type="checkbox" ou type="radio") |
| disabled | Spécifier qu'un champ de saisie doit être désactivé |
| max | Spécifier la valeur maximale d'un champ de saisie |
| maxlength | Spécifier le nombre maximum de caractères pour un champ de saisie |
| min | Spécifier la valeur minimale d'un champ de saisie |
| pattern | Spécifiez une expression régulière pour vérifier la valeur d'entrée |
| readonly | Spécifier qu'un champ de saisie est en lecture seule (ne peut pas être modifié) |
| required | Préciser qu'un champ de saisie est obligatoire (doit être rempli) |
| size | Spécifier la largeur (en caractères) d'un champ de saisie |
| step | Spécifier les intervalles de numéros légaux pour un champ de saisie |
| value | Spécifier la valeur par défaut d'un champ de saisie |
Vous en apprendrez davantage sur les restrictions de saisie dans le chapitre suivant.
L'exemple suivant affiche un champ de saisie numérique, dans lequel vous pouvez saisir une valeur comprise entre 0 et 100, par pas de 10. La valeur par défaut est 30 :
Exemple
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>
Try it Yourself »
Plage de types d'entrée
Le <input type="range"> définit un contrôle pour saisir un nombre dont la valeur exacte n'est pas importante (comme un contrôle slider). La plage par défaut est comprise entre 0 et 100. Cependant, vous pouvez définir des restrictions sur les nombres acceptés avec les valeurs min, max et les attributs step :
Exemple
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
Try it Yourself »
Recherche de type d'entrée
Le <input type="search"> est utilisé pour les champs de recherche (un champ de recherche se comporte comme un champ de texte ordinaire).
Exemple
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
Try it Yourself »
Type d'entrée Tél.
Le <input type="tel"> est utilisé pour les champs de saisie qui doivent contenir un numéro de téléphone.
Exemple
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Try it Yourself »
Type d'entrée Heure
Le <input type="time"> permet à l'utilisateur de sélectionner une heure (pas de fuseau horaire).
En fonction de la prise en charge du navigateur, un sélecteur de temps peut apparaître dans le champ de saisie.
Exemple
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
Try it Yourself »
URL du type d’entrée
Le <input type="url"> est utilisé pour les champs de saisie qui doivent contenir une adresse URL.
En fonction de la prise en charge du navigateur, le champ URL peut être automatiquement validé une fois soumis.
Certains smartphones reconnaissent le type d'URL et ajoutent ".com" au clavier pour correspondre à la saisie de l'URL.
Exemple
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
Try it Yourself »
Type d'entrée Semaine
Le <input type="week"> permet à l'utilisateur de sélectionner une semaine et une année.
En fonction de la prise en charge du navigateur, un sélecteur de date peut apparaître dans le champ de saisie.
Exemple
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
Try it Yourself »
HTML Exercices
HTML Attribut de type d'entrée
| Étiquette | Description |
|---|---|
| <input type=""> | Spécifiez le type d'entrée à afficher |
