Types d'entrées HTML5

HTML5 Nouveaux types d'entrée

HTML5 a plusieurs nouveaux types de saisie de formulaire. Ces nouvelles fonctionnalités permettent un meilleur contrôle d'entrée et de validation.

Ce chapitre décrit ces nouveaux types d'entrée complets:

• couleur
• date
• datetime
• datetime local
• email
• mois
• nombre
• gamme
• recherche
• tel
• temps
• url
• semaine

Note: Pas tous les principaux navigateurs prennent en charge les nouveaux types d'entrée, mais vous pouvez déjà les utiliser dans tous les principaux navigateurs.Si non pris en charge, il peut encore apparaître comme des champs de texte réguliers.

Type d'entrée: Couleur

couleur utilisée dans le type de champ de saisie est principalement utilisé pour sélectionner la couleur, comme suit:

Exemples

Choisissez une couleur dans le sélecteur de couleur:

选择你喜欢的颜色: <input type="color" name="favcolor">

Essayez »

Type d'entrée: Date

type de date vous permet de sélectionner une date à partir d'un sélecteur de date.

Exemples

Définir un contrôleur de temps:

生日: <input type="date" name="bday">

Essayez »

Type d'entrée: datetime

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

Exemples

Définir une date et un contrôleur de temps (heure locale):

生日 (日期和时间): <input type="datetime" name="bdaytime">

Essayez »

Type d'entrée: datetime local

type datetime-local permet de sélectionner une date et l'heure (aucun fuseau horaire).

Exemples

Définir une date et l'heure (aucun fuseau horaire):

生日 (日期和时间): <input type="datetime-local" name="bdaytime">

Essayez »

Type d'entrée: email

type de courrier électronique est utilisé pour les champs d'entrée devrait contenir des adresses e-mail.

Exemples

Lorsque le formulaire est soumis, il vérifie automatiquement si le domaine de courrier électronique valide de valeur:

E-mail: <input type="email" name="email">

Essayez »

Astuce: iPhone dans le navigateur Safari supporte email type d'entrée, et en changeant le clavier de l' écran tactile pour le match (ajouter @ et .com options).

Type d'entrée: mois

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

Exemples

mois Défini et l'année (aucun fuseau horaire):

生日 (月和年): <input type="month" name="bdaymonth">

Essayez »

Type d'entrée: Numéro

type de numéro est utilisé pour les champs d'entrée doit contenir une valeur.

Vous pouvez également définir d'accepter un nombre limité:

Exemples

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

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

Essayez »

Utilisez la propriété suivante pour spécifier le type de numérique limitée:

• Le maximum autorisé par la réglementation Max-
• min - au minimum autorisé par la réglementation
• étape - spécifie les intervalles de numéros juridiques pour (si l'étape = "3", les numéros juridiques pourrait être -3,0,3,6, etc.)
• valeur - la valeur par défaut spécifiée

Essayez un exemple avec tous les attributs définis tentent

Type d'entrée: gamme

type de gamme est utilisé pour les champs d'entrée doit contenir une plage de valeurs numériques.

type de plage est affiché comme un curseur.

Exemples

Vous n'êtes pas obligé de définir une valeur très précise (comme un contrôle de curseur):

<input type="range" name="points" min="1" max="10">

Essayez »

S'il vous plaît utiliser les attributs suivants pour spécifier le type de numérique limitée:

• max - le maximum autorisé par la réglementation
• min - au minimum autorisé par la réglementation
• étape - spécifie les intervalles de numéros juridiques pour
• valeur - la valeur par défaut spécifiée

Type d'entrée: recherche

type de recherche pour le champ de recherche, tels que la recherche de site ou de recherche Google.

Exemples

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

Search Google: <input type="search" name="googlesearch">

Essayez »

Type d'entrée: tel

Exemples

Entrez le téléphone champ du numéro est défini:

电话号码: <input type="tel" name="usrtel">

Essayez »

Type d'entrée: le temps

type de temps vous permet de sélectionner un temps.

Exemples

Définit le contrôleur de temps d'entrée (pas de temps de zone):

选择时间: <input type="time" name="usr_time">

Essayez »

Type d'entrée: url

Type URL est utilisé pour les champs de saisie doit contenir une adresse URL.

Lorsque le formulaire est soumis, il vérifie automatiquement la valeur du champ URL.

Exemples

Définir le champ de saisie URL:

添加您的主页: <input type="url" name="homepage">

Essayez »

Astuce: iPhone dans Safari navigateur prend en charge le type d'entrée URL, et en changeant le clavier de l' écran tactile pour le match (ajouter l' option .com).

Type d'entrée: semaine

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

Exemples

Définitions semaine et l'année (aucun fuseau horaire):

选择周: <input type="week" name="week_year">

Essayez »

HTML5 <input>