HTML nouveau type d'entrée

Le nouveau type d'entrée HTML

En HTML5, les valeurs d'attribut de type suivantes sont ajoutées à l'élément d'entrée pour enrichir le type de zone de texte.
Couleur : Contrôle utilisé pour spécifier la couleur.
 Date : Contrôle de saisie de la date (année, mois, jour, hors heure).
datetime : contrôle de saisie de la date et de l'heure (heures, minutes, secondes et fractions de secondes) basé sur le fuseau horaire UTC.
datetime-local : utilisé pour saisir les contrôles de date et d'heure, hors fuseau horaire.
email : champ d'édition de l'e-mail.
Mois : Un contrôle permettant de saisir l'année et le mois sans fuseau horaire.
number : Contrôle pour saisir des nombres à virgule flottante.
plage : utilisé pour saisir des contrôles de valeur imprécis.
recherche : champ de texte sur une seule ligne pour saisir une chaîne de recherche. Les nouvelles lignes sont automatiquement supprimées de la valeur saisie.
tel : Contrôle de saisie des numéros de téléphone.
heure : utilisé pour saisir le contrôle de l'heure sans fuseau horaire.
url : Champ d'édition de l'URL. .
semaine : Utilisé pour saisir une date composée de la semaine et de l'année, la date n'inclut pas le fuseau horaire. Il est recommandé de se rendre sur un site pédagogique appelé Miaomiaoxue pour parcourir ces connaissances et poser des bases solides.

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 les champs de saisie principalement pour sélectionner les couleurs, comme indiqué ci-dessous :

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>颜色选择测试</title> 
</head>
<body>
<form action="demo-form.php">
  选择你喜欢的颜色: <input type="color" name="favcolor"><br>
  <input type="submit">
</form>
</body>
</html>

Type d'entrée : date`time`week`month

<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<body>
HTML代码：
选择日期：<input type="date" value="2011-01-04" /><br/><br/>
选择时间：<input type="time" value="22:52" /><br/><br/>
选择星期：<input type="week"/><br/><br/>
选择月份：<input type="month"/><br/><br/>
</body>
</html>

Type d'entrée : numéro

le type de numéro est utilisé Un champ de saisie qui doit contenir des valeurs numériques.

Vous pouvez également définir des limites sur les nombres acceptés :

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
<form action="demo-form.php">
  数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>
<p><b>注意:</b>Internet Explorer 9 及更早IE版本不支持 type="number" 。</p>
</body>
</html>

Type d'entrée : plage

type de plage Utilisé pour la saisie champs qui doivent contenir des valeurs numériques dans une certaine plage.

Les types de plages sont affichés sous forme de curseurs.

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
<form action="demo-form.php" method="get">
Points: <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>
<p><b>注意:</b> Internet Explorer 9 及更早IE版本不支持 type="range"。</p>
</body>
</html>

type d'entrée : recherche, tel, url

le type de recherche est utilisé pour rechercher le domaine , comme la recherche sur site ou la recherche Google.

tel définit le champ de saisie du numéro de téléphone. Le type

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.

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> </head><body>
<form action="demo-form.php">
  Search Google: <input type="search" name="googlesearch"><br>
  电话号码: <input type="tel" name="usrtel"><br>
 添加你的主页: <input type="url" name="homepage"><br>
<input type="submit">
</form>
</body></html>

Formation continue

nouveau fichier

<!DOCTYPE HTML> <html> <meta charset="utf-8"> <body> HTML代码：选择日期：<input type="date" value="2011-01-04" /><br/><br/> 选择时间：<input type="time" value="22:52" /><br/><br/> 选择星期：<input type="week"/><br/><br/> 选择月份：<input type="month"/><br/><br/> </body> </html>

soumettre Réinitialiser le code

Opération automatique

HTML nouveau type d'entrée

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]