Quels sont les nouveaux types d'éléments de formulaire en HTML5

Les nouveaux types d'éléments de formulaire en HTML5 sont : 1. le type d'e-mail ; 2. le type d'URL ; 3. le type de numéro ; 5. le type de sélecteur de date (date, mois, semaine, heure, etc.) ; , type de recherche ; 7. type de couleur ; 8. type de téléphone.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.

Les formulaires HTML sont utilisés pour collecter différents types de saisies utilisateur. Dans les formulaires HTML, l'élément est l'élément de formulaire le plus important. Les éléments ont de nombreuses formes. Selon différents attributs de type, les types de type dans le formulaire HTML d'origine incluent le texte, le mot de passe, la radio, la soumission, etc. Dans le nouveau HTML5, il existe plusieurs nouveaux types d'entrée de formulaire. Ces nouvelles fonctionnalités offrent un meilleur contrôle et une meilleure validation des entrées.

Cet article présentera les nouveaux types d'entrée d'éléments de formulaire suivants :

• email
• url
• numéro
• range
• Sélecteurs de date (date, mois, semaine, heure, dateheure, dateheure-locale)
• recherche
• color
• tel

email type

Lorsque l'attribut type est défini sur email, lors de la soumission du formulaire, il vérifiera automatiquement si la valeur du champ email est conforme au format standard de l'e-mail, et vous ne devez utiliser des expressions régulières vous-même. Je suis allé vérifier le format de l'e-mail.

Exemple

Email：<input type="email" name="useremail" />

url type

Lorsque l'attribut type est défini sur url, lorsque le formulaire est soumis, il vérifiera automatiquement si la valeur du champ url est conforme au format standard de l'url.

Exemple

Linkpage:<input type="url" name="link_url" />

Type de numéro

Lorsque l'attribut type est défini sur nombre, il vérifiera automatiquement si le contenu d'entrée est de type numérique. Vous pouvez également définir la limite du numéro de la zone de saisie.

Exemple

Number：<input type="number" name="user_num" min="1" max="10" />

Pour les propriétés qualifiées numériquement :

Property	Description
max	Spécifie la valeur maximale autorisée
min	Spécifie ce qui est autorisé La valeur minimale de
step	Spécifie les intervalles de numéros légaux (si step="3", les numéros légaux sont -3,0,3,6, etc.)
value	Spécifie la valeur par défaut
désactivé	Spécifie que le champ de saisie est désactivé
maxlength	Spécifie la longueur maximale des caractères du champ de saisie
pattern	Spécifie le modèle utilisé pour valider le champ de saisie
lecture seule	Spécifie que la valeur du champ de saisie ne peut pas être modifiée
required	Spécifie que la valeur du champ de saisie est obligatoire
size	Spécifie les caractères visibles du champ de saisie

range type

Le type plage 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. Vous pouvez également définir des limites sur les nombres acceptés.

Exemple

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

Les attributs utilisés pour qualifier les nombres sont les mêmes que les quatre premiers du type de nombre.

Sélecteurs de dates Le type de sélecteur de dates

est utilisé pour sélectionner les dates et les heures.

Exemple

Date：<input type="date" name="user_date" />

Type de saisie pour sélectionner la date et l'heure :

• date Sélectionnez le jour, le mois, l'année
• mois Sélectionnez le mois, l'année
• semaine Sélectionnez la semaine et l'année
• heure Sélectionnez l'heure (heures et minutes)
• datetime Sélectionnez l'heure, le jour, le mois, l'année (heure UTC, fuseau horaire)
• datetime-local Sélectionnez l'heure, le jour, le mois, l'année (heure locale)

type de recherche

est utilisé pour les champs de recherche, tels que la recherche sur site ou recherche Google (le champ de recherche se comporte comme un champ de texte ordinaire).

Exemple

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

color type

Lorsque l'attribut type est défini sur color, il vérifiera automatiquement si le contenu d'entrée est au format couleur.

Exemple

Select your favorite color:<input type="color" name="favcolor">

tel type

Lorsque l'attribut type est défini sur tel, il vérifiera automatiquement si le contenu saisi est au format du numéro de téléphone.

Exemple

Telephone:<input type="tel" name="usrtel">

Recommandations associées : "Tutoriel vidéo HTML"

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!