Les formulaires sont la partie principale du document HTML pour la collecte de données et d'informations utilisateur. Pour obtenir une contribution correcte dans le formulaire des utilisateurs, il est nécessaire de restreindre les utilisateurs de saisir des informations non valides. Les développeurs sont tenus d'ajouter des vérifications de validation sur les documents HTML. À cette fin, l'utilisateur peut ajouter une validation sur différents objets du formulaire, tels que la validation du numéro de téléphone via le «modèle" attribut.

Ce message expliquera comment appliquer la validation du numéro de téléphone HTML5 avec le modèle.

Comment appliquer la validation du numéro de téléphone HTML5 avec le modèle?

Pour ajouter la validation du numéro de téléphone avec un modèle, suivez les instructions données.

Étape 1: Créez un conteneur «div»

Initialement, faites un conteneur «div» en utilisant le ««Élément et attribuant le«identifiant" attribut.

Étape 2: Ajouter des titres

Ensuite, ajoutez deux titres en utilisant le «

" et "

" Mots clés. Le "

"La balise est utilisée pour intégrer le cap du niveau un, et"

»Spécifie le cap du niveau deux.

Étape 3: Créer une forme

Ensuite, créez un formulaire en utilisant le «”Tag avec les éléments suivants:

• Insérer un ""Tag avec le"pour”Attribut pour étiqueter l'élément. L'attribut «for» relie l'élément spécifique avec l'étiquette.
• ""L'élément est ajouté après le"”Tag, qui fait référence à un champ de saisie pour insérer des données.
• L'élément «» est fourni avec des attributs «type» et «modèle».
• Le "taper»L'attribut détermine le type particulier d'entrée définie. Utilisez le «Tél«Valeur pour obtenir le numéro de téléphone de l'utilisateur.
• Le "modèle»Définit le format des types d'entrée indiqués, y compris le courrier électronique, la date, le texte, la recherche, l'URL, le TEL et le mot de passe.
• Créez un bouton en utilisant «Type» comme «bouton«Et« valeur »comme«Entrer»:

Linuxhint Ltd UK

Validation du numéro de téléphone HTML5 avec modèle

Format du numéro de téléphone: xxx-xxx-xxxx


Numéro de téléphone:

Sortir

Étape 4: Élément de style «div»

Pour coiffer le "div«Élément, accédez d'abord à l'élément par id«#validation»Et appliquez les propriétés suivantes:

#validation
Texte-aligne: Centre;
Style de la frontière: crête;
marge: 50px;
Color à la frontière: RVB (85, 85, 245);
Color en arrière-plan: RVB (243, 242, 160);

Ici:

• "alignement de texte«La propriété est définie comme«centre”Pour aligner le texte au centre.
• "style de bordure"Est utilisé pour déterminer le style de bordure. Par exemple, nous avons appliqué le «crête" style de bordure.
• "marge"Attribué l'espace à l'extérieur de l'élément.
• "couleur de la bordure”Utilisé pour spécifier la limite colorée autour de l'élément défini.
• "Couleur de l'arrière plan»Spécifie la couleur d'arrière-plan du récipient.

Sortir

Nous avons démontré comment appliquer la validation du numéro de téléphone HTML5 avec le modèle.

Conclusion

Pour appliquer le modèle de validation du numéro de téléphone HTML5, créez d'abord un formulaire en utilisant le «"Tag et ajouter""Cela étiquette le champ de saisie. Après cela, ajoutez le "”Élément avec le"taper" comme "Tél»Et les attributs de« modèle ». Le "modèle»L'attribut spécifie le modèle de validation du numéro de téléphone. Ce message a démontré la procédure pour ajouter la validation du numéro de téléphone HTML5 avec le modèle.