Attribut de type <input> HTML
Exemple
Un formulaire HTML avec deux champs de saisie ; un champ de texte et un bouton d'envoi :
<form action="/action_page.php">
<label for="username">Username: </label>
<input type="text"
id="username" name="username"><br>
<input type="submit" value="Submit">
</form>
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
L' typeattribut spécifie le type d'
<input>élément à afficher.
Si l' typeattribut n'est pas spécifié, le type par défaut est "texte".
Prise en charge du navigateur
| Attribute | |||||
|---|---|---|---|---|---|
| type | Yes | Yes | Yes | Yes | Yes |
Syntaxe
<input type="value">
Valeurs d'attribut
| Value | Description |
|---|---|
| button | Defines a clickable button (mostly used with a JavaScript to activate a script) |
| checkbox | Defines a checkbox |
| color | Defines a color picker |
| date | Defines a date control (year, month, day (no time)) |
| datetime-local | Defines a date and time control (year, month, day, time (no timezone) |
| Defines a field for an e-mail address | |
| file | Defines a file-select field and a "Browse" button (for file uploads) |
| hidden | Defines a hidden input field |
| image | Defines an image as the submit button |
| month | Defines a month and year control (no timezone) |
| number | Defines a field for entering a number |
| password | Defines a password field |
| radio | Defines a radio button |
| range | Defines a range control (like a slider control) |
| reset | Defines a reset button |
| search | Defines a text field for entering a search string |
| submit | Defines a submit button |
| tel | Defines a field for entering a telephone number |
| text | Default. Defines a single-line text field |
| time | Defines a control for entering a time (no timezone) |
| url | Defines a field for entering a URL |
| week | Defines a week and year control (no timezone) |
Plus d'exemples
Type d'entrée : bouton
Un bouton poussoir qui active un JavaScript lorsqu'il est cliqué :
<input type="button" value="Click me" 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"> 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><br>
Type d'entrée : couleur
Sélectionnez une couleur dans un sélecteur de couleurs :
<label for="favcolor">Select your favorite color:</label>
<input type="color"
id="favcolor" name="favcolor">
Type d'entrée : date
Définissez un champ date :
<label for="birthday">Birthday:</label>
<input type="date"
id="birthday" name="birthday">
Type d'entrée : datetime-local
Définissez un contrôle de date et d'heure (pas de fuseau horaire) :
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local"
id="birthdaytime" name="birthdaytime">
Type d'entrée : e-mail
Définissez un champ pour une adresse e-mail (sera automatiquement validé lors de la soumission) :
<label for="email">Enter your email:</label>
<input type="email"
id="email" name="email">
Type d'entrée : fichier
Définissez un champ de sélection de fichier et un bouton "Parcourir..." (pour les téléchargements de fichiers) :
<label for="myfile">Select a file:</label>
<input type="file"
id="myfile" name="myfile">
Type d'entrée : masqué
Définissez un champ masqué (non visible pour un utilisateur).
Un champ masqué 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éfinissez une image en tant que bouton d'envoi :
<input type="image" src="img_submit.gif" alt="Submit">
Type d'entrée : mois
Définissez un contrôle du mois et de l'année (pas de fuseau horaire) :
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month"
id="bdaymonth" name="bdaymonth">
Type d'entrée : nombre
Définissez un champ pour saisir un nombre (vous pouvez également définir des restrictions sur les nombres acceptés) :
<label for="quantity">Quantity (between 1 and 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éfinissez un champ mot de passe (les caractères sont masqués) :
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd">
Type d'entrée : radio
Les boutons radio permettent à un utilisateur de sélectionner un seul choix parmi un nombre limité :
<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éfinissez un contrôle pour saisir un nombre dont la valeur exacte n'a pas d'importance (comme un 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 (between 0 and 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éfinissez un bouton de réinitialisation (réinitialise toutes les valeurs du formulaire aux valeurs par défaut) :
<input type="reset">
Conseil : utilisez le bouton de réinitialisation avec précaution ! Cela peut être gênant pour les utilisateurs qui activent accidentellement le bouton de réinitialisation.
Type d'entrée : recherche
Définissez un champ de recherche (comme une recherche de site ou une recherche Google) :
<label for="gsearch">Search Google:</label>
<input type="search"
id="gsearch" name="gsearch">
Type d'entrée : soumettre
Définissez un bouton d'envoi :
<input type="submit">
Type d'entrée : tél
Définissez un champ pour saisir un numéro de téléphone :
<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}">
Type d'entrée : texte
Définissez deux champs de texte sur une seule ligne dans lesquels un utilisateur peut saisir du texte :
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text"
id="lname" name="lname"><br>
Type d'entrée : heure
Définir un champ de saisie d'heure (pas de fuseau horaire) :
<label for="appt">Select a time:</label>
<input type="time"
id="appt" name="appt">
Type d'entrée : URL
Définissez un champ pour saisir une URL :
<label for="homepage">Add your homepage:</label>
<input type="url"
id="homepage" name="homepage">
Conseil : Safari sur iPhone reconnaît le type d'entrée d'URL et modifie le clavier à l'écran en conséquence (ajoute l'option .com).
Type d'entrée : semaine
Définissez un contrôle semaine et année (pas de fuseau horaire) :
<label for="week">Select a week:</label>
<input type="week"
id="week" name="week">
❮ Balise HTML <input>