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 :
1.color
2.date
3. datetime
4.datetime-local
5.email
6.mois
7.numéro
8. plage
9.search
10.tel
11.time
12.url
13.week
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 :
Instance
Depuis le sélecteur de couleurs Choisissez une couleur :
Choisissez une couleur que vous aimez :
<input type="color" name="favcolor">
Type de saisie : date
Le type de date vous permet de sélectionner une couleur parmi une sélecteur de date Choisissez une date.
Instance
Définir une heureContrôleur :
生日: <input type="date" name="bday">
Type d'entrée : datetime
Le type datetime permet de sélectionner une Date (heure UTC).
Instance
Définir un contrôleur de date et d'heure (heure locale) :
生日 (日期和时间): <input type="datetime" name="bdaytime">
Type d'entrée : datetime-local
datetime-local type Permet vous de sélectionner une date et une heure (sans fuseau horaire).
Instance
Définir une date et une heure (sans fuseau horaire) :
生日 (日期和时间): <input type="datetime-local" name="bdaytime">
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 :
E-mail: <input type="email" name="email">
Conseils : Safari sur iPhone Le navigateur prend en charge le type de saisie de 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.
Exemple
Définir le mois et l'année (pas de fuseau horaire) :
生日 (月和年): <input type="month" name="bdaymonth">
Type d'entrée : numéro
le type de numéro est utilisé pour l'entrée qui doit contient un domaine de valeurs numériques.
Vous pouvez également fixer des limites sur les nombres acceptés :
Exemple
Définir un champ de saisie numérique (limite) :
Quantité ( 1 à 5) :
<input type="number" name="quantity" min="1" max="5">
Utilisez l'attribut suivant 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 (si step="3", le numéro légal est -3,0,3,6, etc.)
valeur - spécifie la valeur par défaut
Essayez l'exemple avec tous les attributs qualifiésEssayez-le
Type d'entrée : plage
le type de plage est utilisé pour les valeurs numériques qui doivent contenir un certain champ de saisie de plage .
Le type de plage est affiché sous forme de curseur.
Exemple
定义一个不需要非常精确的数值(类似于滑块控制):
<input type="range" name="points" min="1" max="10">
请使用下面的属性来规定对数字类型的限定:
max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值
Input 类型: search
search 类型用于搜索域,比如站点搜索或 Google 搜索。
实例
定义一个搜索字段 (类似站点搜索或者Google搜索):
Search Google: <input type="search" name="googlesearch">
Input 类型: tel
实例
定义输入电话号码字段:
电话号码: <input type="tel" name="usrtel">
Input 类型: time
time 类型允许你选择一个时间。
实例
定义可输入时间控制器(无时区):
选择时间: <input type="time" name="usr_time">
Input 类型: url
url 类型用于应该包含 URL 地址的输入域。
在提交表单时,会自动验证 url 域的值。
实例
定义输入URL字段:
添加您的主页: <input type="url" name="homepage">
提示: iPhone 中的 Safari 浏览器支持 url 输入类型,并通过改变触摸屏键盘来配合它(添加 .com 选项)。
Input 类型: week
week 类型允许你选择周和年。
实例
定义周和年 (无时区):
选择周: <input type="week" name="week_year">
【相关推荐】
1. 特别推荐:“php程序员工具箱”V0.1版本下载
2. 免费h5在线视频教程
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!