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éfinir 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>

Essayez-le 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 de mot de passe：

Exemple

<form>
 Nom d'utilisateur :

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

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

Essayez-le 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' 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 (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>

Essayez-le 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>

Essayez-le vous-même

Type d'entrée: radio

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

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

Exemple

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

Essayez-le 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éfinit une case à cocher.

Les cases à cocher permettent à l'utilisateur de choisir ZÉRO ou PLUSIEURS options parmi un nombre limité.

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>

Essayez-le 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!">

Essayez-le 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 non pris en charge par les navigateurs anciens sont traités comme du texte.

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 restrictions 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>

Essayez-le vous-même

Restrictions d'entrée

Voici une liste de restrictions 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 utilisée pour vérifier la valeur de l'entrée.
readonly Définir le champ d'entrée comme lecture seule (impossible à modifier).
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 restrictions des entrées dans le prochain chapitre.

Exemple

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

Essayez-le 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>

Essayez-le vous-même

Vous pouvez ajouter des restrictions à 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:
</form>

Essayez-le 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>

Essayez-le 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>

Essayez-le 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>

Essayez-le 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>

Essayez-le 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>

Essayez-le 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 of Birth (date and time):
  <input type="datetime" name="bdaytime">
</form>

Essayez-le 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 of Birth (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

Essayez-le vous-même

Type d'entrée : email

<input type="email"> Champ d'entrée utilisé pour inclure l'adresse e-mail.

Selon le support du navigateur, la validation automatique de l'adresse e-mail peut être effectuée lors de la soumission.

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

Exemple

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

Essayez-le vous-même

Type d'entrée : search

<input type="search"> Champ de recherche utilisé (le champ de recherche se comporte comme un champ de texte conventionnel).

Exemple

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

Essayez-le vous-même

Type d'entrée : tel

<input type="tel"> Champ d'entrée utilisé pour inclure le 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>

Essayez-le vous-même

Type d'entrée : url

<input type="url"> Champ d'entrée utilisé pour inclure l'adresse URL.

Selon le support du navigateur, la validation automatique du champ URL peut être effectuée lors de la soumission.

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

Exemple

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

Essayez-le vous-même