Introduction détaillée et exemple de code du 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 :

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在线视频教程

3. php.cn原创html5视频教程

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!