Type d'entrée html = ”tel” | Expliqué
Les développeurs Web utilisent le HTML "saisir"Élément avec le type"Tél”Pour créer le champ de saisie pour les numéros de téléphone. Ce type de champ de saisie peut être utilisé par les utilisateurs pour soumettre un numéro de téléphone. De plus, la création d'un champ de saisie pour entrer spécifiquement le numéro de téléphone peut rendre votre page Web professionnelle et différente des concurrents.
Cet article expliquera le type d'entrée HTML = "Tél" élément.
Comment créer un élément de type d'entrée HTML = «Tel»?
Pour créer un type d'entrée HTML TEL, suivez les étapes données.
Étape 1: Créez le champ de saisie du numéro de téléphone
Dans le fichier html, créez d'abord un élément div avec le nom "principal". À l'intérieur de cet élément div, ajouter et éléments. Dans l'élément d'étiquette, mentionnez d'abord la légende, puis ajoutez une balise d'entrée associée aux attributs de type et de nom. Après cela, incluez une balise avec la légende "Soumettre»:
Enregistrez le fichier et ouvrez-le dans votre navigateur. En ce moment, la page Web ressemblera à ceci:
Étape 2: Appliquer des styles au champ de saisie
Appliquons des styles au type d'entrée TEL avec les propriétés CSS.
Style «Main» Div
.principal
Color d'arrière-plan: RGBA (0, 0, 0, 0.159);
largeur maximale: 600px;
marge: 15px auto;
hauteur: 200px;
Border-Radius: 30px;
Le ".principal"Est utilisé pour accéder à l'élément div avec la classe principale, et les propriétés qui y sont appliqués sont décrites ci-dessous:
- "Couleur de l'arrière plan”La propriété est utilisée pour le réglage de la couleur d'arrière-plan de l'élément.
- "largeur maximale»La propriété est utilisée pour le réglage de la largeur maximale de l'élément.
- "marge«Propriété avec la valeur»15px»Représente l'espace de 15px au fond supérieur, et le«auto”Génère l'espace égal sur le côté gauche-droit de l'élément.
- "hauteur»La propriété est utilisée pour définir la hauteur de l'élément à 200px.
- "rayon frontalier»La propriété est utilisée pour le réglage de la largeur de l'élément à 30px.
Style «Form-Main» Div
.form-main-main
Affichage: flex;
Justification-contenu: centre;
Align-Items: Centre;
hauteur: 100%;
taille de police: 24px;
Le ".formulaire"Est utilisé pour accéder à l'élément div avec le formulaire de classe. La description des propriétés appliquées est mentionnée ci-dessous:
- "afficher»Propriété avec la valeur définie comme«fléchir»Créera une disposition flexible pour les éléments.
- "justifier»La propriété est utilisée pour aligner les éléments flexibles horizontalement.
- "align-items«La propriété est utilisée pour aligner les éléments flexibles verticalement.
- "hauteur”La propriété est utilisée pour le réglage de la hauteur de l'élément.
- "taille de police»La propriété est utilisée pour le réglage de la taille de la police de l'élément.
Style «Entrée» de DIV-FORM-MAIN
.Form-main entrée
Border: 1px RVB solide (47, 63, 63);
rembourrage: 10px;
taille de police: 22px;
Color en arrière-plan: RVB (85, 104, 104);
Couleur: #ffffff;
Aperçu: aucun;
La classe de formulaire-formulaire est appliquée avec les propriétés CSS qui sont expliquées ci-dessous:
- "frontière"La propriété est appliquée avec la valeur"RVB solide 1px (47, 63, 63)», Où 1PX représente la largeur de la bordure, le type de ligne continue et RVB (47, 63, 63) représente la couleur.
- "rembourrage"La propriété est attribuée avec la valeur"10px», Où le premier 10px représente l'espace en haut et en bas du contenu, et le second fait référence à l'espace 10px sur le côté gauche et droit du contenu de l'élément.
- "taille de police»La propriété est utilisée pour définir la taille de la police.
- "Couleur de l'arrière plan”La propriété est utilisée pour le réglage de la couleur d'arrière-plan de l'élément.
- "couleur»La propriété est utilisée pour définir la couleur de la police.
- "contour”La propriété avec la valeur aucune ne supprimera le contour du champ de saisie lorsqu'il est sélectionné.
Style «Peracehoholder» de l'entrée
.Entrée de formulaire de formulaire :: Placeholder
Couleur: #dadada;
Nous n'avons appliqué la couleur que sur l'espace réservé d'entrée.
Style le «bouton» du formulaire
.Bouton de formulaire de formulaire
Border: 1px RVB solide (47, 63, 63);
rembourrage: 10px 20px;
taille de police: 22px;
Color en arrière-plan: RVB (12, 33, 33);
Couleur: # A3A3A3;
curseur: pointeur;
marge-gauche: 5px;
transition: tout 0.3s facilité;
Voici la description des propriétés données:
- "frontière"La propriété est appliquée avec la valeur"RVB solide 1px (47, 63, 63)», Où 1PX représente la largeur de la bordure, le type de ligne continue et RVB (47, 63, 63) représente la couleur.
- "rembourrage"La propriété est attribuée avec la valeur"10px», Où 10px représente l'espace en haut et en bas du contenu et en espace 10px sur le côté gauche et droit du contenu.
- "taille de police»La propriété est utilisée pour définir la taille de la police.
- "Couleur de l'arrière plan”La propriété est utilisée pour le réglage de la couleur d'arrière-plan de l'élément.
- "couleur»La propriété est utilisée pour définir la couleur de la police.
- "le curseur"Avec la valeur définie comme"aiguille"Je vais changer le curseur en une main pointant lorsqu'il est placé sur le bouton.
- "marge-gauche”La propriété définira un espace de 5px sur la gauche de l'élément.
- "transition»Propriété avec la valeur définie comme tout 0.La facilité 3S permet à l'élément d'être déplacé progressivement.
Style le «bouton» sur le volant
.Bouton de formulaire de formulaire: Hover
transform: tradlatey (-5px);
En fournissant le code susmentionné, l'écran de sortie générera le résultat comme indiqué ci-dessous:
Étape 3: Ajouter un attribut «requis» au champ de saisie
Il est souvent obligatoire d'ajouter un modèle spécifié du numéro de téléphone dans nos formulaires, qui peut être validé avant la soumission du formulaire.
Pour ce faire, le «requis»L'attribut est utilisé de manière à ce que si un utilisateur soumet un champ de saisie vide, un message sera généré pour remplir le champ comme suit:
Il peut être vu à partir de l'image ci-dessous que l'entrée dans la valeur dans le champ de saisie est obligatoire:
Étape 4: Ajouter un attribut «modèle» au champ de saisie
Comme nous le savons, il n'y a pas de procédure de validation pour les numéros de téléphone car ils varient d'un endroit à l'autre. L'attribut de modèle est utilisé pour la spécification du format du numéro de téléphone. En conséquence, l'utilisateur ne peut ajouter qu'un numéro de téléphone en fonction du modèle:
Fournissons un mauvais modèle et voyons ce qui se passe:
On peut observer que le champ de saisie informe l'utilisateur pour saisir un nombre qui devrait correspondre au modèle.
Alors, entrons un numéro de téléphone avec le modèle correct, cliquez sur "Soumettre«Bouton et voyez ce qui se passe:
Cool! Nous avons réussi à utiliser un élément d'entrée de type Tel.
Conclusion
Pour faire un champ de numéro de téléphone, le type d'entrée HTML TEL peut être utilisé. Ce type peut avoir plusieurs attributs pour ajouter des fonctionnalités supplémentaires telles que l'espace réservé, le modèle, requis et plus. Plus précisément, l'attribut de modèle est utilisé pour définir le modèle du numéro de téléphone, et les attributs requis restreignent l'utilisateur à soumettre une valeur non vide. Cet article a démontré le type d'entrée HTML TEL et ses attributs avec des exemples.