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 :

    php中文网(php.cn) 
   选择你喜欢的颜色:

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.

    php中文网(php.cn) 
   生日:

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) :

    php中文网(php.cn) 
   生日 (日期和时间):

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) :

    php中文网(php.cn) 
   生日 (日期和时间):

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 :

    php中文网(php.cn) 
   E-mail:

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) :

    php中文网(php.cn) 
   生日 ( 月和年 ):

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) :

    php中文网(php.cn) 
   数量 ( 1 到 5 之间):

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

    php中文网(php.cn)

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) :

    php中文网(php.cn) 
   Points:

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) :

    php中文网(php.cn) 
   Search Google:

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 :

    php中文网(php.cn) 
   电话号码:

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) :

    php中文网(php.cn) 
   选择时间:

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 :

    php中文网(php.cn) 
   添加你的主页:

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) :

 选择周:

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. <><><><><><><>

Formation continue