Types d'entrée HTML

Ce chapitre décrit les types d'entrée de l'élément <input>.

Type d'entrée : text

<input type="text"> Défini pourEntrée de texteLe champ d'entrée en ligne unique :

Exemple

<form>
 Prénom:<br>
<input type="text" name="firstname">
<br>
 Nom de famille:<br>
<input type="text" name="lastname">
</form>

Essayer vous-même

Le code HTML ci-dessus apparaît ainsi dans le navigateur :

Prénom:


Nom de famille:

Type d'entrée : password

<input type="password"> définiChamp mot de passe：

Exemple

<form>
 Nom d'utilisateur :

<input type="text" name="username">
<br>
 Mot de passe utilisateur :

<input type="password" name="psw">
</form>

Essayer vous-même

Le code HTML ci-dessus apparaît ainsi dans le navigateur :

Nom d'utilisateur :


Mot de passe utilisateur :

Remarque :Les caractères du champ mot de passe 'password' seront traités par masquage (affichés sous forme d'étoiles ou de cercles pleins).

Type d'entrée : submit

<input type="submit"> définisoumettreLes données du formulaire àLe programme de traitement des formulairesdu bouton.

Le programme de traitement des formulaires (form-handler) est généralement une page serveur contenant des scripts pour traiter les données d'entrée.

Définissez le programme de traitement du formulaire (form-handler) dans l'attribut action du formulaire :

Exemple

<form action="action_page.php">
Prénom:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Nom de famille:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Soumettre">
</form>

Essayer vous-même

Le code HTML ci-dessus apparaît ainsi dans le navigateur :

Prénom:


Nom de famille:


Si vous omettez l'attribut value du bouton de soumission, ce bouton recevra le texte par défaut :

Exemple

<form action="action_page.php">
Prénom:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Nom de famille:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit">
</form>

Essayer vous-même

Type d'entrée: radio

<input type="radio"> Défini un bouton radio.

Les boutons radio permettent à l'utilisateur de sélectionner UNIQUEMENT UNE des options parmi un nombre limité de choix:

Exemple

<form>
<input type="radio" name="sex" value="male" checked> Masculin
<br>
<input type="radio" name="sex" value="female">Féminin
</form>

Essayer vous-même

Le code HTML ci-dessus apparaît ainsi dans le navigateur :

Masculin

Féminin

Type d'entrée: case à cocher

<input type="checkbox"> Défini une case à cocher.

Les cases à cocher permettent à l'utilisateur de choisir zéro ou plusieurs options parmi un nombre limité d'options.

Exemple

<form>
<input type="checkbox" name="vehicle" value="Bike">Je possède une bicyclette
<br>
<input type="checkbox" name="vehicle" value="Car">Je possède une voiture 
</form>

Essayer vous-même

Le code HTML ci-dessus apparaît ainsi dans le navigateur :

Je possède une bicyclette

Je possède une voiture

Type d'entrée: bouton

<input type="button"> définibouton。

Exemple

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

Essayer vous-même

Le code HTML ci-dessus apparaît ainsi dans le navigateur :

Types d'entrée HTML5

HTML5 a ajouté plusieurs nouveaux types d'entrée :

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Remarque :Les types d'entrée obsolètes pour les navigateurs web anciens sont traités comme le type d'entrée text.

Type d'entrée : number

<input type="number"> Utilisé pour les champs d'entrée qui doivent contenir une valeur numérique.

Vous pouvez limiter les nombres.

Selon la prise en charge du navigateur, les limites peuvent être appliquées aux champs d'entrée.

Exemple

<form>
  Quantité (entre 1 et 5) :
  <input type="number" name="quantity" min="1" max="5">
</form>

Essayer vous-même

Limites d'entrée

Voici une liste de quelques limites d'entrée courantes (certains sont nouveaux dans HTML5) :

Attribut Description
disabled Définir si le champ d'entrée doit être désactivé.
max Définir la valeur maximale du champ d'entrée.
maxlength Définir le nombre maximum de caractères du champ d'entrée.
min Définir la valeur minimale du champ d'entrée.
pattern Définir l'expression régulière pour vérifier la valeur de l'entrée.
readonly Définir le champ d'entrée comme lecture seule (ne peut pas être modifié).
required Définir si le champ d'entrée est obligatoire (doit être rempli).
size Définir la largeur du champ d'entrée (en caractères).
step Définir l'intervalle numérique légal du champ d'entrée.
value Définir la valeur par défaut du champ d'entrée.

Vous apprendrez plus sur les limites des entrées dans le prochain chapitre.

Exemple

<form>
  Quantité :
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Essayer vous-même

Type d'entrée : date

<input type="date"> Utilisé pour les champs d'entrée qui doivent contenir une date.

According to browser support, the date picker will appear in the input field.

Exemple

<form>
  Anniversaire :
  <input type="date" name="bday">
</form>

Essayer vous-même

Vous pouvez ajouter des limites à l'entrée :

Exemple

<form>
  Entrez une date avant le 01-01-1980:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  Enter a date after 2000-01-01:<br>
</form>

Essayer vous-même

Input type: color

<input type="color"> Used for input fields that should contain colors.

According to browser support, the color picker will appear in the input field.

Exemple

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

Essayer vous-même

Input type: range

<input type="range"> Used for input fields that should contain values within a certain range.

According to browser support, the input field can be displayed as a slider control.

Exemple

<form>
  <input type="range" name="points" min="0" max="10">
</form>

Essayer vous-même

You can use the following attributes to specify restrictions: min, max, step, value.

Input type: month

<input type="month"> Allow users to select month and year.

According to browser support, the date picker will appear in the input field.

Exemple

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

Essayer vous-même

Input type: week

<input type="week"> Allow users to select week and year.

According to browser support, the date picker will appear in the input field.

Exemple

<form>
  Select a week:
  <input type="week" name="week_year">
</form>

Essayer vous-même

Input type: time

<input type="time"> Allow users to select time (without time zone).

According to browser support, the time picker will appear in the input field.

Exemple

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>

Essayer vous-même

Input type: datetime

<input type="datetime"> Allow users to select date and time (with time zone).

According to browser support, the date picker will appear in the input field.

Exemple

<form>
  Date and time of birthday (date and time):
  <input type="datetime" name="bdaytime">
</form>

Essayer vous-même

Input type: datetime-local

<input type="datetime-local"> Allow users to select date and time (without time zone).

According to browser support, the date picker will appear in the input field.

Exemple

<form>
  Date and time of birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

Essayer vous-même

Type d'entrée : email

<input type="email"> Pour le champ d'entrée qui doit contenir une adresse e-mail.

Selon le support du navigateur, l'adresse e-mail peut être vérifiée automatiquement lors de la soumission.

Certains smartphones reconnaissent le type email et ajoutent ".com" au clavier pour correspondre à l'entrée d'email.

Exemple

<form>
  E-mail :
  <input type="email" name="email">
</form>

Essayer vous-même

Type d'entrée : search

<input type="search"> Pour le champ de recherche (le champ de recherche se comporte comme un champ de texte régulier).

Exemple

<form>
  Recherche Google :
  <input type="search" name="googlesearch">
</form>

Essayer vous-même

Type d'entrée : tel

<input type="tel"> Pour le champ d'entrée qui doit contenir un numéro de téléphone.

Actuellement, seul Safari 8 prend en charge le type tel.

Exemple

<form>
  Téléphone :
  <input type="tel" name="usrtel">
</form>

Essayer vous-même

Type d'entrée : url

<input type="url"> Pour le champ d'entrée qui doit contenir une adresse URL.

Selon le support du navigateur, le champ URL peut être vérifié automatiquement lors de la soumission.

Certains smartphones reconnaissent le type URL et ajoutent ".com" au clavier pour correspondre à l'entrée URL.

Exemple

<form>
  Ajoutez votre page d'accueil:
  <input type="url" name="homepage">
</form>

Essayer vous-même