English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 Tutoriel de base

HTML5 API

HTML5 Média

HTML5 Graphique

HTML5 Type d'entrée

Dans HTML5Dans HTML, plusieurs nouveaux types d'entrée de formulaire ont été ajoutés. En utilisant ces éléments ajoutés, une meilleure contrôle et validation des entrées peut être réalisée.

HTML5 Nouveaux types d'entrée Input

HTML5 Il possède plusieurs nouveaux types d'entrée de formulaire. Ces nouvelles fonctionnalités offrent un contrôle et une validation des entrées améliorés.

Ce chapitre présente en détail ces nouveaux types d'entrée :

  • couleur

  • date

  • datetime

  • datetime-local

  • email

  • mois

  • numéro

  • gamme

  • recherche

  • tel

  • heure

  • url

  • semaine

Attention:Pas tous les navigateurs populaires prennent en charge le nouveau type d'entrée, mais vous pouvez déjà les utiliser dans tous les navigateurs populaires. Même s'ils ne sont pas pris en charge, ils peuvent toujours s'afficher comme une zone de texte standard.

Type d'entrée: couleur

Le type color est utilisé dans les champs input principalement pour sélectionner des couleurs, comme suit :

Exemple en ligne

Choisissez une couleur à partir du sélecteur de couleur :

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial (oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Choisissez la couleur de votre choix : <input type="color" name="favcolor"><br>
　　<input type="submit">
</form>
</body>
</html>
Vérifiez le test ‹/›

Type d'entrée : date

Le type date permet de choisir une date à partir d'un sélecteur de date.

Exemple en ligne

Définir un contrôleur de temps :

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial (oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Anniversaire : <input type="date" name="bday">
　　<input type="submit">
</form>
</body>
</html>
Vérifiez le test ‹/›

Type d'entrée : datetime

Le type datetime permet de choisir une date (heure UTC).

Exemple en ligne

Définir un contrôleur de date et d'heure (heure locale) :

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial (oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Anniversaire (date et heure) : <input type="datetime" name="bdaytime">
　　<input type="submit">
</form>
</body>
</html>
Vérifiez le test ‹/›

Type d'entrée : datetime-local

datetime-Le type local permet de choisir une date et une heure (sans fuseau horaire).

Exemple en ligne

Définir une date et une heure (sans fuseau horaire) :

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial (oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Anniversaire (date et heure) : <input type="datetime-local" name="bdaytime">
　　<input type="submit">
</form>
</body>
</html>
Vérifiez le test ‹/›

Type d'entrée : email

Le type email est utilisé pour les champs d'entrée qui doivent contenir des e-Champ d'entrée pour l'adresse email.

Exemple en ligne

Lors de la soumission du formulaire, la valeur du champ email est automatiquement vérifiée pour son intégrité et sa validité :

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial (oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　E-mail: <input type="email" name="usremail">
　　<input type="submit">
</form>
<p><b>Attention :/b> Internet Explorer　9　　et les versions plus anciennes d'IE ne prennent pas en charge type="email" .</p>
</body>
</html>
Vérifiez le test ‹/›

Avis: Le navigateur Safari sur iPhone prend en charge le type d'entrée email et l'accompagne en changeant le clavier tactile (ajout des options @ et .com).

Type d'entrée : month

Le type month vous permet de choisir un mois.

Exemple en ligne

Définir le mois et l'année (sans fuseau horaire) :

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial (oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Anniversaire (mois et année) : <input type="month" name="bdaymonth">
　　<input type="submit">
</form>
</body>
</html>
Vérifiez le test ‹/›

Type d'entrée : number

Le type number est utilisé pour les champs d'entrée qui doivent contenir des nombres.

Vous pouvez également définir des limites pour les nombres acceptés :

Exemple en ligne

Définir un champ d'entrée numérique (limité) :

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial (oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　quantité (　1　à　5　): <input type="number" name="quantity" min="1" max="5">
　　<input type="submit">
</form>
<p><b>Attention :/b>Internet Explorer　9　et les versions plus anciennes d'IE ne prennent pas en charge type="number" .</p>
</body>
</html>
Vérifiez le test ‹/›

Utilisez les propriétés suivantes pour définir les limites pour les types numériques :

propriétéDescription
désactivéLes champs d'entrée sont désactivés
maxDéfinir la valeur maximale autorisée
maxlengthDéfinir la longueur maximale autorisée pour le champ d'entrée
minDéfinir la valeur minimale autorisée
patternDéfinir le modèle utilisé pour valider le champ d'entrée
readonlyDéfinir si la valeur du champ d'entrée ne peut pas être modifiée
requiredDéfinir si la valeur du champ d'entrée est obligatoire
sizeDéfinir le nombre de caractères visibles dans le champ d'entrée
stepDéfinir l'intervalle numérique légal du champ d'entrée
valueDéfinir la valeur par défaut du champ d'entrée

Type d'entrée : range

Le type range est utilisé pour les champs d'entrée qui doivent contenir des valeurs numériques dans une certaine plage.

Le type range est affiché sous forme de curseur.

Exemple en ligne

Définir une valeur numérique non très précise (similaire à un contrôleur de glisse) :

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial (oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php" method="get">
Points : <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>
<p><b>Attention :/b> Internet Explorer　9　Les versions d'IE plus anciennes ne prennent pas en charge type="range" .</p>
</body>
</html>
Vérifiez le test ‹/›

Utilisez les propriétés suivantes pour définir les limites pour le type numérique :

  • max - Définir la valeur maximale autorisée

  • min - Définir la valeur minimale autorisée

  • step - Définir l'intervalle numérique légal

  • value - Définir la valeur par défaut

Type d'entrée : search

Le type search est utilisé pour les champs de recherche, comme la recherche de site ou Google Search.

Exemple en ligne

Définir un champ de recherche (similaire à la recherche de site ou Google Search) :

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial (oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Recherche Google : <input type="search" name="googlesearch"><br>
　　<input type="submit">
</form>
</body>
</html>
Vérifiez le test ‹/›

Type d'entrée : tel

Exemple en ligne

Définir le champ d'entrée du numéro de téléphone :

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial (oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Numéro de téléphone : <input type="tel" name="usrtel"><br>
　　<input type="submit">
</form>
</body>
</html>
Vérifiez le test ‹/›

Type d'entrée : time

Le type time permet de choisir une heure.

Exemple en ligne

Définir un contrôleur de temps entrable (sans fuseau horaire) :

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial (oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Choisir l'heure : <input type="time" name="usr_time">
　　<input type="submit">
</form>
</body>
</html>
Vérifiez le test ‹/›

Type d'entrée : url

Le type URL est utilisé pour les champs d'entrée qui doivent contenir des adresses URL.

Lors de la soumission du formulaire, la valeur du domaine URL est vérifiée automatiquement.

Exemple en ligne

Définir le champ d'URL d'entrée :

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial (oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Ajoutez votre page d'accueil : <input type="url" name="homepage"><br>
　　<input type="submit">
</form>
<p><b>Attention :/b> Internet Explorer　9Les versions d'IE plus anciennes ne prennent pas en charge type="url" .</p>
</body>
</html>
Vérifiez le test ‹/›

Avis: Le navigateur Safari dans iPhone prend en charge l'entrée de type URL et s'adapte à lui en changeant le clavier tactile (ajout de l'option .com).

Type d'input: week

Le type week permet de choisir la semaine et l'année.

Exemple en ligne

Définir la semaine et l'année (sans fuseau horaire):

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial (oldtoolbag.com)</title>　
</head>
<body>
<form action="demo-form.php">
　　Choisir la semaine: <input type="week" name="year_week">
　　<input type="submit">
</form>
</body>
</html>
Vérifiez le test ‹/›

HTML5 Balise <input>

BaliseDescription
<input>Description de l'inputeur d'entrée
HTML5 Éléments de formulaireHTML5 Audio (audio)