HTML <input> type Attribut
Exemple
Un formulaire HTML avec deux champs de saisie : un champ de texte et un bouton de soumission.
<form action="/action_page.php">
<label for="username">Nom d'utilisateur : </label>
<input type="text" id="username" name="username"><br>
<input type="submit" value="Soumettre">
</form> Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et Utilisation
L'attribut type spécifie le type de <input> à afficher.
Si l'attribut type n'est pas spécifié, le type par défaut est "text".
Support des Navigateurs
| Attribut | |||||
|---|---|---|---|---|---|
| type | Oui | Oui | Oui | Oui | Oui |
Syntaxe
<input type=" value "> Valeurs des Attributs
| Valeur | Description |
|---|---|
| bouton | Définit un bouton cliquable (principalement utilisé avec un JavaScript pour activer un script) |
| case à cocher | Définit une case à cocher |
| couleur | Définit un sélecteur de couleur |
| date | Définit un contrôle de date (année, mois, jour (pas d'heure)) |
| datetime-local | Définit un contrôle de date et heure (année, mois, jour, heure (pas de fuseau horaire) |
| Définit un champ pour une adresse e-mail | |
| fichier | Définit un champ de sélection de fichier et un bouton "Parcourir" (pour les téléchargements de fichiers) |
| caché | Définit un champ de saisie caché |
| image | Définit une image comme bouton de soumission |
| mois | Définit un contrôle de mois et d'année (pas de fuseau horaire) |
| nombre | Définit un champ pour entrer un nombre |
| mot de passe | Définit un champ de mot de passe |
| bouton radio | Définit un bouton radio |
| plage | Définit un contrôle de plage (comme un contrôle de curseur) |
| réinitialiser | Définit un bouton de réinitialisation |
| recherche | Définit un champ de texte pour entrer une chaîne de recherche |
| soumettre | Définit un bouton de soumission |
| tel | Définit un champ pour entrer un numéro de téléphone |
| texte | Par défaut. Définit un champ de texte sur une seule ligne |
| temps | Définit un contrôle pour entrer une heure (pas de fuseau horaire) |
| url | Définit un champ pour entrer une URL |
| semaine | Définit un contrôle de semaine et d'année (pas de fuseau horaire) |
Plus d'Exemples
Type d'entrée : bouton
Un bouton poussoir qui active un JavaScript lorsqu'il est cliqué :
<input type="button" value="Cliquez sur moi" onclick="msg()"> Type d'entrée : case à cocher
Les cases à cocher permettent à un utilisateur de sélectionner une ou plusieurs options parmi un nombre limité de choix :
<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><br> Type d'entrée : couleur
Sélectionnez une couleur à partir d'un sélecteur de couleur :
<label for="favcolor">Sélectionnez votre couleur préférée :</label>
<input type="color" id="favcolor" name="favcolor"> Type d'entrée : date
Définir un contrôle de date :
<label for="birthday">Date de naissance :</label>
<input type="date" id="birthday" name="birthday"> Type d'entrée : datetime-local
Définir un contrôle de date et heure (pas de fuseau horaire) :
<label for="birthdaytime">Date de naissance (date et heure) :</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime"> Type d'entrée : email
Définir un champ pour une adresse e-mail (sera automatiquement validé lors de la soumission) :
<label for="email">Entrez votre e-mail :</label>
<input type="email" id="email" name="email"> Type d'entrée : fichier
Définir un champ de sélection de fichier et un bouton "Parcourir..." (pour les téléchargements de fichiers) :
<label for="myfile">Sélectionnez un fichier :</label>
<input type="file" id="myfile" name="myfile"> Type d'entrée : caché
Définir un champ caché (non visible pour un utilisateur).
Un champ caché stocke souvent quel enregistrement de base de données doit être mis à jour lorsque le formulaire est soumis :
<input type="hidden" id="custId" name="custId" value="3487"> Type d'entrée : image
Définir une image comme bouton de soumission :
<input type="image" src="img_submit.gif" alt="Soumettre"> Type d'entrée : mois
Définir un contrôle de mois et d'année (pas de fuseau horaire) :
<label for="bdaymonth">Date de naissance (mois et année) :</label>
<input type="month" id="bdaymonth" name="bdaymonth"> Type d'entrée : nombre
Définir un champ pour entrer un nombre (vous pouvez également définir des restrictions sur les nombres acceptés) :
<label for="quantity">Quantité (entre 1 et 5) :</label>
<input type="number" id="quantity" name="quantity" min="1" max="5"> Utilisez les attributs suivants pour spécifier des restrictions :
- max - spécifie la valeur maximale autorisée
- min - spécifie la valeur minimale autorisée
- step - spécifie les intervalles de nombres légaux
- value - spécifie la valeur par défaut
Type d'entrée : mot de passe
Définir un champ de mot de passe (les caractères sont masqués) :
<label for="pwd">Mot de passe :</label>
<input type="password" id="pwd" name="pwd"> Type d'entrée : bouton radio
Les boutons radio permettent à un utilisateur de sélectionner uniquement l'un des choix limités :
<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> Type d'entrée : plage
Définir 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 :
<label for="vol">Volume (entre 0 et 50) :</label>
<input type="range" id="vol" name="vol" min="0" max="50"> Utilisez les attributs suivants pour spécifier des restrictions :
- max - spécifie la valeur maximale autorisée
- min - spécifie la valeur minimale autorisée
- step - spécifie les intervalles de nombres légaux
- value - spécifie la valeur par défaut
Type d'entrée : réinitialiser
Définir un bouton de réinitialisation (réinitialise toutes les valeurs du formulaire aux valeurs par défaut) :
<input type="reset"> Astuce : Utilisez le bouton de réinitialisation avec précaution ! Cela peut être ennuyeux pour les utilisateurs qui activent accidentellement le bouton de réinitialisation.
Type d'entrée : recherche
Définir un champ de recherche (comme une recherche sur le site, ou une recherche Google) :
<label for="gsearch">Rechercher sur Google :</label>
<input type="search" id="gsearch" name="gsearch"> Type d'entrée : soumettre
Définir un bouton de soumission :
<input type="submit"> Type d'entrée : tel
Définir un champ pour entrer un numéro de téléphone :
<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}"> Type d'entrée : texte
Définir deux champs de texte sur une seule ligne dans lesquels un utilisateur peut entrer du texte :
<label for="fname">Prénom :</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Nom de famille :</label>
<input type="text" id="lname" name="lname"><br> Type d'entrée : temps
Définir un contrôle pour entrer une heure (pas de fuseau horaire) :
<label for="appt">Sélectionnez une heure :</label>
<input type="time" id="appt" name="appt"> Type d'entrée : url
Définir un champ pour entrer une URL :
<label for="homepage">Ajoutez votre page d'accueil :</label>
<input type="url" id="homepage" name="homepage"> Astuce : Safari sur iPhone reconnaît le type d'entrée url et change le clavier à l'écran pour correspondre (ajoute l'option .com).
Type d'entrée : semaine
Définir un contrôle de semaine et d'année (pas de fuseau horaire) :
<label for="week">Sélectionnez une semaine :</label>
<input type="week" id="week" name="week">