HTML Types d'Entrée
Ce chapitre décrit les différents types d'éléments HTML <input> .
Types d'Entrée HTML
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".
Type d'Entrée Texte
<input type="text"> définit un champ de saisie de texte sur une seule ligne :
Exemple
<form>
<label for="fname">Prénom:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Nom de famille:</label><br>
<input type="text" id="lname" name="lname">
</form> Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
Prénom :Nom de famille :
Type d'Entrée Mot de Passe
<input type="password"> définit un champ de mot de passe :
Exemple
<form>
<label for="username">Nom d'utilisateur:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Mot de passe:</label><br>
<input type="password" id="pwd" name="pwd">
</form> Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
Nom d'utilisateur :Mot de passe :
Les caractères dans 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 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.php">
<label for="fname">Prénom:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Nom de famille:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Soumettre">
</form> Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
Si vous omettez l'attribut value du bouton de soumission, le bouton obtiendra un texte par défaut :
Exemple
<form action="/action_page.php">
<label for="fname">Prénom:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Nom de famille:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form> Type d'Entrée Réinitialiser
<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.php">
<label for="fname">Prénom:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Nom de famille:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Soumettre">
<input type="reset" value="Réinitialiser">
</form> Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
Si vous changez les valeurs d'entrée et que vous cliquez ensuite 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 des choix limités :
Exemple
<p>Choisissez votre langage Web préféré:</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> Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
Type d'Entrée Checkbox
<input type="checkbox"> définit une case à cocher .
Les cases à cocher permettent à un utilisateur de sélectionner ZÉRO ou PLUSIEURS options parmi un nombre limité de choix.
Exemple
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> J'ai un vélo</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> J'ai une voiture</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> J'ai un bateau</label>
</form> Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
Type d'Entrée Bouton
<input type="button"> définit un bouton :
Exemple
<input type="button" onclick="alert('Hello World!')" value="Cliquez Moi!"> 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 d'entrée qui doivent contenir une couleur.
En fonction du support du navigateur, un sélecteur de couleur peut apparaître dans le champ d'entrée.
Exemple
<form>
<label for="favcolor">Sélectionnez votre couleur préférée:</label>
<input type="color" id="favcolor" name="favcolor">
</form> Type d'Entrée Date
Le <input type="date"> est utilisé pour les champs d'entrée qui doivent contenir une date.
En fonction du support du navigateur, un sélecteur de date peut apparaître dans le champ d'entrée.
Exemple
<form>
<label for="birthday">Date de naissance:</label>
<input type="date" id="birthday" name="birthday">
</form> Vous pouvez également utiliser les attributs min et max pour ajouter des restrictions aux dates :
Exemple
<form>
<label for="datemax">Entrez une date avant 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Entrez une date après 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form> Type d'Entrée Datetime-local
Le <input type="datetime-local"> spécifie un champ d'entrée de date et d'heure, sans fuseau horaire.
En fonction du support du navigateur, un sélecteur de date peut apparaître dans le champ d'entrée.
Exemple
<form>
<label for="birthdaytime">Date de naissance (date et heure):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form> Type d'Entrée Email
Le <input type="email"> est utilisé pour les champs d'entrée qui doivent contenir une adresse e-mail.
En fonction du support du navigateur, l'adresse e-mail peut être automatiquement validée lors de la soumission.
Certains smartphones reconnaissent le type email et ajoutent ".com" au clavier pour correspondre à l'entrée email.
Exemple
<form>
<label for="email">Entrez votre e-mail:</label>
<input type="email" id="email" name="email">
</form> Type d'Entrée Image
Le <input type="image"> définit une image comme bouton de soumission.
Le chemin vers l'image est spécifié dans l'attribut src .
Exemple
<form>
<input type="image" src="img_submit.gif" alt="Soumettre" width="48" height="48">
</form> Type d'Entrée Fichier
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">Sélectionnez un fichier:</label>
<input type="file" id="myfile" name="myfile">
</form> Type d'Entrée Caché
Le <input type="hidden"> définit un champ d'entrée caché (non visible pour un utilisateur).
Un champ caché permet aux développeurs web d'inclure des données qui ne peuvent pas être vues ou modifiées par les utilisateurs lors de la soumission d'un formulaire.
Un champ caché stocke souvent quel enregistrement de base de données 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) en utilisant les outils de développement de n'importe quel navigateur ou la fonctionnalité "Afficher la source". Ne pas utiliser d'entrées cachées comme forme de sécurité !
Exemple
<form>
<label for="fname">Prénom:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Soumettre">
</form> Type d'Entrée Mois
Le <input type="month"> permet à l'utilisateur de sélectionner un mois et une année.
En fonction du support du navigateur, un sélecteur de date peut apparaître dans le champ d'entrée.
Exemple
<form>
<label for="bdaymonth">Date de naissance (mois et année):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form> Type d'Entrée Nombre
Le <input type="number"> définit un champ d'entrée numérique .
Vous pouvez également définir des restrictions sur les nombres acceptés.
L'exemple suivant affiche un champ d'entrée numérique, où vous pouvez entrer une valeur de 1 à 5 :
Exemple
<form>
<label for="quantity">Quantité (entre 1 et 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form> Restrictions d'Entrée
Voici une liste de certaines restrictions d'entrée courantes :
| Attribut | Description |
|---|---|
| checked | Spécifie qu'un champ d'entrée doit être pré-sélectionné lorsque la page se charge (pour type="checkbox" ou type="radio") |
| disabled | Spécifie qu'un champ d'entrée doit être désactivé |
| max | Spécifie la valeur maximale pour un champ d'entrée |
| maxlength | Spécifie le nombre maximum de caractères pour un champ d'entrée |
| min | Spécifie la valeur minimale pour un champ d'entrée |
| pattern | Spécifie une expression régulière pour vérifier la valeur d'entrée |
| readonly | Spécifie qu'un champ d'entrée est en lecture seule (ne peut pas être modifié) |
| required | Spécifie qu'un champ d'entrée est requis (doit être rempli) |
| size | Spécifie la largeur (en caractères) d'un champ d'entrée |
| step | Spécifie les intervalles numériques légaux pour un champ d'entrée |
| value | Spécifie la valeur par défaut pour un champ d'entrée |
Vous en apprendrez plus sur les restrictions d'entrée dans le prochain chapitre.
L'exemple suivant affiche un champ d'entrée numérique, où vous pouvez entrer une valeur de 0 à 100, par étapes de 10. La valeur par défaut est 30 :
Exemple
<form>
<label for="quantity">Quantité:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form> Type d'Entrée Plage
Le <input type="range"> définit un contrôle pour entrer un nombre dont la valeur exacte n'est pas importante (comme un contrôle de curseur). La plage par défaut est de 0 à 100. Cependant, vous pouvez définir des restrictions sur les nombres acceptés avec les attributs min , max et step :
Exemple
<form>
<label for="vol">Volume (entre 0 et 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form> Type d'Entrée Recherche
Le <input type="search"> est utilisé pour les champs de recherche (un champ de recherche se comporte comme un champ de texte normal).
Exemple
<form>
<label for="gsearch">Rechercher sur Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form> Type d'Entrée Tel
Le <input type="tel"> est utilisé pour les champs d'entrée qui doivent contenir un numéro de téléphone.
Exemple
<form>
<label for="phone">Entrez votre numéro de téléphone:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form> Type d'Entrée Heure
Le <input type="time"> permet à l'utilisateur de sélectionner une heure (sans fuseau horaire).
En fonction du support du navigateur, un sélecteur d'heure peut apparaître dans le champ d'entrée.
Exemple
<form>
<label for="appt">Sélectionnez une heure:</label>
<input type="time" id="appt" name="appt">
</form> Type d'Entrée Url
Le <input type="url"> est utilisé pour les champs d'entrée qui doivent contenir une adresse URL.
En fonction du support du navigateur, le champ url peut être automatiquement validé lors de la soumission.
Certains smartphones reconnaissent le type url et ajoutent ".com" au clavier pour correspondre à l'entrée url.
Exemple
<form>
<label for="homepage">Ajoutez votre page d'accueil:</label>
<input type="url" id="homepage" name="homepage">
</form> Type d'Entrée Semaine
Le <input type="week"> permet à l'utilisateur de sélectionner une semaine et une année.
En fonction du support du navigateur, un sélecteur de date peut apparaître dans le champ d'entrée.
Exemple
<form>
<label for="week">Sélectionnez une semaine:</label>
<input type="week" id="week" name="week">
</form> Attribut Type d'Entrée HTML
| Tag | Description |
|---|---|
| <input type=""> | Spécifie le type d'entrée à afficher |