Ajout de huit nouveaux types d'entrée INPUT pour HTML5

Cet article présente principalement les huit nouveaux types d'entrée INPUT en HTML5. Ces huit nouveaux types d'entrée sont le type d'e-mail, le type d'URL, le type de numéro, le type de plage, le type de date, le type de recherche et le type de téléphone. 1. Les amis dans le besoin peuvent se référer aux exemples de code HTML de type d'entrée existant de

 :

文本域 <input type="text">
单选按钮 <input type="radio">
复选框 <input type="checkbox">
下拉列表 <select><option>
密码域 <input type="password">
提交按钮 <input type="submit">
可单击按钮 <input type="button">
图像按钮 <input type="image">
隐藏域 <input type="hidden">
重置按钮 <input type="reset">
文件域 <input type="file">

En HTML5, plusieurs nouvelles entrées de formulaire ont été ajoutées. Types d'entrée, meilleur contrôle et validation des entrées. peut être réalisé en utilisant ces nouveaux éléments.
1. Application de type e-mail
L'élément de saisie de type e-mail est une zone de saisie de texte spécialement utilisée pour saisir une adresse e-mail Lors de la soumission du formulaire, la valeur de l'e-mail sera automatiquement vérifiée. de la boîte.

<input type="email" name="user_email" />

2. Application du type d'url
L'élément d'entrée de type url fournit une zone de texte pour saisir un texte spécial tel que l'adresse url.

<input type="url" name="user_url" />

3. Application du type numérique
L'élément d'entrée de type numérique fournit une zone de texte pour saisir des valeurs numériques.

<input type="number" name="number1" min="1" max="20" step="4" />

4. Application du type de plage
L'élément d'entrée de type plage fournit une zone de texte pour saisir des valeurs numériques dans une certaine plage, qui s'affiche sous la forme d'un barre de défilement sur la page Web.

<input type="range" name="range1" min="1" max="30" />

5. Application de type de détection de date
Type de saisie Code HTML Description de la fonction

date <input type="date">

Sélectionner le jour, le mois, l'année

month <input type="month">

Sélectionnez le mois et l'année

week <input type="week">

Sélectionnez la semaine et l'année

time <input type="time">

Sélectionnez l'heure (heures et minutes)

datetime <input type="datetime">

Sélectionnez l'heure, le jour, le mois, l'année (heure UTC)

datetime-local
<input type="datetime-local"> 选取时间、日、月、年（本地时间）

6. Application de type de recherche

L'élément de saisie du type de recherche fournit dans la zone de texte. pour saisir des mots-clés de recherche.

<input type="search" name="search1" />
input[type="search"]
{  
 -webkit-appearance:textfield;
 }

7. Application de type Tel
L'élément de saisie de type tel fournit une zone de texte spécifiquement pour saisir les numéros de téléphone.

<input type="tel" name="tel" />

8. Application de type de couleur
L'élément de saisie de type de couleur fournit une zone de texte spécifiquement utilisée pour définir la couleur.

<input type="color" name="color" />

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez prêter attention à. le site PHP chinois !

Recommandations associées :

Événements tactiles 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!