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>
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. <🎜><🎜><🎜><🎜><🎜><🎜><🎜>
section suivante