Type d'entrée HTML5

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 :

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action=" " method="post">
    选择你喜欢的颜色: <input type="color" name="favcolor"><br>
    <input type="submit">
</form>
<?php
echo $_POST['favcolor'];
?>
</body>
</html>

Exécutez le programme et essayez-le

Type d'entrée : date

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

<!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écutez le programme et essayez-le

Type d'entrée : datetime

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

Instance

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

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="demo-form.php">
    生日 (日期和时间): <input type="datetime" name="bdaytime">
    <input type="submit">
</form>
</body>
</html>

Exécutez le programme pour l'essayer

Type d'entrée : datetime-local

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

Instances

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

<!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écutez le programme et essayez-le

Type de saisie : email

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

Instance

Lors de la soumission du formulaire, il vérifiera automatiquement si la valeur du champ email est légale et valide :

<!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>
</body>
</html>

Exécutez le programme et entrez une valeur légale Essayez-le avec des e-mails illégaux

Remarque : Internet Explorer 9 et les versions antérieures d'IE ne prennent pas en charge type="email"

Type de saisie : mois

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

Exemple

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

<!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écutez le programme et essayez-le

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 les nombres acceptés :

Exemple

Définir un champ de saisie numérique (limite) :

<!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>
</body>
</html>

Exécutez le programme et essayez-le

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

max- spécifie Valeur maximale autorisée
min - spécifie la valeur minimale autorisée
step - spécifie l'intervalle du nombre légal (si step="3", Le les nombres légaux sont -3, 0, 3, 6, etc.)
valeur - spécifie la valeur par défaut

Exemple

Exemple avec tous les attributs qualifiés

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="demo_form.php" method="get">
    <input type="number" name="points" min="0" max="10" step="3" value="6">
    <input type="submit">
</form>
</body>
</html>

Exécutez le programme et essayez-le

Type d'entrée : range

le type range 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.

Exemple

Définir une valeur qui n'a pas besoin d'être très précise (similaire au contrôle par curseur) :

<!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>
</body>
</html>

Exécuter le programme et essayez-le

Veuillez utiliser les attributs suivants pour spécifier les limites sur les 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 d'entrée : recherche

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

Exemple

Définissez un champ de recherche (similaire à la recherche sur site ou à la recherche Google) :

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="demo-form.php">
    Search Google: <input type="search" name="googlesearch"><br>
    <input type="submit">
</form>
</body>
</html>

Exécutez le programme et attribuez-lui un essayez

Type d'entrée : tel

Instance

Définir l'entrée téléphone Champ numérique :

<!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écutez le programme et essayez-le

Type de saisie : heure

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

Exemple

Définir un contrôleur de temps d'entrée (sans fuseau horaire) :

<!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écutez le programme et essayez-le

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

Définissez le champ URL de saisie :

<!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>
</body>
</html>

Exécutez le programme et essayez-le

Type de saisie : semaine

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

Exemple

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

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

Exécutez le programme et essayez-le

Balise HTML5 <input>

标签	描述
<input>	描述input输入器

Balises

Description

< ;input>

Décrire le périphérique d'entrée d'entrée

Remarque

: Tous les principaux navigateurs ne prennent pas en charge le nouveau type de saisie, mais vous pouvez déjà l'utiliser dans tous les principaux navigateurs. utilisé dans les navigateurs. Même s'il n'est pas pris en charge, il peut toujours être affiché sous forme de champ de texte normal. <🎜><🎜><🎜><🎜><🎜><🎜><🎜>

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="" method="post"> 选择你喜欢的颜色: <input type="color" name="favcolor"><br> <input type="submit"> </form> <?php echo $_POST['favcolor']; ?> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Type d'entrée HTML5

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]