Manuel complet ...login
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Manuel complet HTML5
←
→
auteur：php.cn  temps de mise à jour：2022-04-12 13:54:08

HTML5 nouveau type d'entrée


HTML5 propose plusieurs nouveaux types de saisie de formulaire. Ces nouvelles fonctionnalités offrent un meilleur contrôle et une meilleure validation des entrées.

Ce chapitre fournit une introduction complète à ces nouveaux types d'entrée :

  • couleur

  • date

  • dateheure

  • dateheure-local

  • e-mail

  • mois

  • numéro

  • plage

  • recherche

  • tél

  • heure

  • url

  • semaine

Remarque :Tous les principaux navigateurs ne prennent pas en charge les nouveaux types de saisie, mais vous pouvez déjà les utiliser dans tous les principaux navigateurs. Même s'il n'est pas pris en charge, il peut toujours être affiché sous forme de champ de texte normal.

Type de saisie : couleur

Le type de couleur est utilisé dans le champ de saisie et est principalement utilisé pour sélectionner les couleurs, comme indiqué ci-dessous :

Exemple 

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  选择你喜欢的颜色: <input type="color" name="favcolor"><br>
  <input type="submit">
</form>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne


Type de saisie : date

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

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  生日: <input type="date" name="bday">
  <input type="submit">
</form>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


Type de saisie : datetime

Le type datetime permet de sélectionner une date (heure UTC).

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  生日: <input type="date" name="bday">
  <input type="submit">
</form>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


Type d'entrée : datetime-local

le type datetime-local vous permet de sélectionner une date et une heure (sans fuseau horaire).

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  生日 (日期和时间): <input type="datetime-local" name="bdaytime">
  <input type="submit">
</form>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Type de saisie : email

Le type d'e-mail est utilisé pour les champs de saisie qui doivent contenir des adresses e-mail.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  E-mail: <input type="email" name="usremail">
  <input type="submit">
</form>

<p><b>注意:</b> Internet Explorer 9  及更早IE版本不支持type="email" 。</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Conseil : Safari sur iPhone prend en charge le type de saisie par courrier électronique et modifie le clavier de l'écran tactile pour l'adapter (en ajoutant les options @ et .com).

Type de saisie : mois

le type de mois vous permet de sélectionner un mois.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  生日 ( 月和年 ): <input type="month" name="bdaymonth">
  <input type="submit">
</form>

</body>
</html>

Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


Type de saisie : nombre

Le type de nombre est utilisé pour les champs de saisie qui doivent contenir des valeurs numériques.

Vous pouvez également définir des limites sur le nombre accepté :

Instances

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>

<p><b>注意:</b>Internet Explorer 9 及更早IE版本不支持 type="number" 。</p>

</body>
</html>

Exécuter une instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Utilisez les attributs suivants pour spécifier les limites des types numériques :

  • max- spécifie autorisé. valeur maximale de

  • min - spécifie la valeur minimale autorisée

  • step - spécifie l'intervalle de nombre légal (si step="3", alors Les nombres légaux sont -3,0,3,6, etc.)

  • valeur - spécifie la valeur par défaut

Essayez-le avec tous les qualifiés attributs Essayez l'exemple de

Type d'entrée : plage

le type de plage est utilisé pour les champs de saisie qui doivent contenir des valeurs numériques dans une certaine plage.

Les types de plages sont affichés sous forme de curseurs.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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>注意:</b> Internet Explorer 9 及更早IE版本不支持 type="range"。</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Veuillez utiliser les attributs suivants pour spécifier les limites des types numériques :

  • max - spécifie la valeur maximale autorisée

  • min - spécifie la valeur minimale autorisée

  • étape - spécifie l'intervalle du numéro légal

  • valeur - spécifie la valeur par défaut

Type de saisie : recherche

le type de recherche est utilisé pour les champs de recherche, tels que la recherche sur site ou la recherche Google.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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>注意:</b> Internet Explorer 9 及更早IE版本不支持 type="range"。</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


Type d'entrée : tel

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  电话号码: <input type="tel" name="usrtel"><br>
  <input type="submit">
</form>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


Type d'entrée : heure

Le type d'heure vous permet de sélectionner une heure.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  选择时间: <input type="time" name="usr_time">
  <input type="submit">
</form>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


Type d'entrée : url

le type d'url est utilisé pour les champs de saisie qui doivent contenir des adresses URL.

Lors de la soumission du formulaire, la valeur du champ URL sera automatiquement vérifiée.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  添加你的主页: <input type="url" name="homepage"><br>
  <input type="submit">
</form>

<p><b>注意:</b> Internet Explorer 9及更早IE版本不支持 type="url" 。</p>

</body>
</html>

Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Astuce : Safari sur iPhone prend en charge le type de saisie URL et modifie le clavier de l'écran tactile pour fonctionner avec celui-ci (en ajoutant l'option .com).

Type de saisie : semaine

Le type de semaine permet de sélectionner la semaine et l'année.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>

<body>

<form action="demo-form.php">
  选择周: <input type="week" name="year_week">
  <input type="submit">
</form>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


Balise HTML5 <input>

标签描述
<input>描述input输入器
←
→
soumettre

Site Web PHP chinois

MaisonMaisonCoursCoursArticleArticleQuestions et réponsesQuestions et réponsesDictionnaireDictionnaireManuelManuelTéléchargerTéléchargerrechercherechercheAPPTélécharger APPTélécharger