Types d'entrée HTML
Ce chapitre décrit les différents types d' <input>élément HTML.
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">
Conseil : La valeur par défaut de l' typeattribut est "texte".
Texte du type d'entrée
<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>
Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
Prénom:Nom de famille:
Mot de passe du type d'entrée
<input type="password">définit un champ 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>
Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
Nom d'utilisateur:Mot de passe:
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 des données de formulaire à un gestionnaire de formulaire .
Le gestionnaire de formulaire est généralement une page serveur avec un script pour le traitement des données d'entrée.
Le gestionnaire de formulaire est spécifié dans l' action
attribut du formulaire :
Exemple
<form action="/action_page.php">
<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>
Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
Si vous omettez l'attribut value du bouton submit, le bouton obtiendra un texte par défaut :
Exemple
<form action="/action_page.php">
<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>
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.php">
<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>
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 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>
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>
Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
Bouton Type d'entrée
<input type="button">définit un bouton :
Exemple
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Voici comment le code HTML ci-dessus sera affiché dans un navigateur :
Couleur du type d'entrée
Le <input type="color">est utilisé pour les champs de saisie qui doivent contenir une couleur.
Selon 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>
Type d'entrée Date
Le <input type="date">est utilisé pour les champs de saisie qui doivent contenir une date.
Selon 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>
Vous pouvez également utiliser les attributs minet maxpour 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>
Type d'entrée Datetime-local
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>
Courriel du type d'entrée
Le <input type="email">est utilisé pour les champs de saisie qui doivent contenir une adresse e-mail.
Selon 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 à l'entrée d'e-mail.
Exemple
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
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>
Type d'entrée masqué
Le <input type="hidden">
définit un champ de saisie masqué (invisible 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 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 pour 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>
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>
Numéro de type d'entrée
Le <input type="number">définit un champ de saisie
numérique .
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value from 1 to 5:
Example
<form>
<label for="quantity">Quantity (between 1 and
5):</label>
<input type="number" id="quantity" name="quantity"
min="1" max="5">
</form>
Input Restrictions
Here is a list of some common input restrictions:
| Attribute | Description |
|---|---|
| checked | Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio") |
| disabled | Specifies that an input field should be disabled |
| max | Specifies the maximum value for an input field |
| maxlength | Specifies the maximum number of character for an input field |
| min | Specifies the minimum value for an input field |
| pattern | Specifies a regular expression to check the input value against |
| readonly | Specifies that an input field is read only (cannot be changed) |
| required | Specifies that an input field is required (must be filled out) |
| size | Specifies the width (in characters) of an input field |
| step | Specifies the legal number intervals for an input field |
| value | Specifies the default value for an input field |
You will learn more about input restrictions in the next chapter.
The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:
Example
<form>
<label for="quantity">Quantity:</label>
<input
type="number" id="quantity" name="quantity" min="0" max="100" step="10"
value="30">
</form>
Input Type Range
The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default
range is 0 to 100. However, you can set restrictions on what
numbers are accepted with the min, max, and step attributes:
Example
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
Input Type Search
The <input type="search"> is used for search fields (a search field behaves like a regular text field).
Example
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
Input Type Tel
The <input type="tel"> is used for input fields that should contain a telephone number.
Example
<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>
Input Type Time
The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
Example
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
Input Type Url
The <input type="url"> is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.
Example
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
Input Type Week
The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
HTML Exercises
HTML Input Type Attribute
| Tag | Description |
|---|---|
| <input type=""> | Specifies the input type to display |