Maison > interface Web > Questions et réponses frontales > Quels sont les nouveaux types d'éléments de formulaire en HTML5

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

青灯夜游
Libérer: 2021-12-17 16:18:00
original
9613 Les gens l'ont consulté

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.

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

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" />
Copier après la connexion

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" />
Copier après la connexion

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" />
Copier après la connexion

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

PropertyDescription
maxSpécifie la valeur maximale autorisée
min Spécifie ce qui est autorisé La valeur minimale de
stepSpécifie les intervalles de numéros légaux (si step="3", les numéros légaux sont -3,0,3,6, etc.)
valueSpécifie la valeur par défaut
désactivé Spécifie que le champ de saisie est désactivé
maxlengthSpécifie la longueur maximale des caractères du champ de saisie
patternSpécifie le modèle utilisé pour valider le champ de saisie
lecture seuleSpécifie que la valeur du champ de saisie ne peut pas être modifiée
requiredSpécifie que la valeur du champ de saisie est obligatoire
sizeSpé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" />
Copier après la connexion

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" />
Copier après la connexion

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">
Copier après la connexion

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">
Copier après la connexion

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">
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal