Dans ce tutoriel, vous apprendrez tous les aspects importants des champs de saisie pour les adresses e-mail et les URL dans les formulaires HTML. L'objectif est de vous montrer comment mettre en œuvre efficacement la validation de ces saisies et comment personnaliser le style pour différents états de saisie. Cela améliorera non seulement l'expérience utilisateur, mais aussi la qualité des données que vous collectez.
Conclusions principales
- Vous apprendrez la structure de base et la validation des e-mails et des URL en utilisant HTML.
- Vous découvrirez également comment fournir un retour visuel aux utilisateurs en cas de saisie invalide à l'aide de CSS.
- L'utilisation de motifs pour une validation supplémentaire des adresses e-mail et des URL est expliquée.
Guide étape par étape
1. Créer un champ de saisie de base pour un e-mail
Commencez par créer un élément d'entrée standard pour une adresse e-mail. Vous devez définir le type comme "email" pour que le navigateur puisse valider automatiquement la saisie.
Le champ de saisie est maintenant traité par HTML comme attendu pour une adresse e-mail, et en cas de saisie incorrecte, une rétroaction visuelle est donnée. Dès qu'un utilisateur commence à saisir, l'arrière-plan devient rose pour indiquer un problème.
2. Validation de l'adresse e-mail
La validation de l'adresse e-mail se fait en utilisant des règles simples. Il doit y avoir au moins un caractère "@" suivi d'au moins un autre caractère. Il s'agit d'une validation NLP de base. Cependant, cette règle de validation n'est pas suffisante pour garantir l'existence réelle de l'adresse e-mail.
Un exemple d'adresse e-mail invalide serait "bla@". Dans un tel cas, l'envoi du formulaire est bloqué, et l'utilisateur voit un message d'erreur.
3. Utilisation de modèles pour une validation plus précise
Pour une validation plus précise, vous pouvez utiliser l'attribut "pattern". Avec une expression régulière (Regex), vous pouvez spécifier que l'adresse e-mail doit répondre à certaines exigences, par exemple une domaine spécifique.
Cette validation supplémentaire assure que seules les adresses e-mail valides sont acceptées, telles que les adresses Gmail ou GMX par exemple.
4. Saisie requise et style
Pour garantir que le champ d'e-mail est rempli, vous pouvez ajouter l'attribut "required". Si l'utilisateur tente d'envoyer le formulaire sans saisie, il recevra immédiatement une rétroaction visuelle.
Pour styliser les saisies invalides, vous pouvez utiliser en CSS le selector ":invalid". Cela rendra l'arrière-plan du champ rouge pour avertir l'utilisateur que la saisie n'est pas correcte.
5. Créer un champ de saisie pour les URL
Tout comme pour l'e-mail, il est important de créer un élément d'entrée approprié pour les URL. Définissez le type sur "url" pour que le navigateur puisse également valider la saisie ici.
6. Validation de l'URL
Les exigences de base pour une URL valide comprennent qu'elle doit commencer par "http://" ou "https://" et avoir au moins un caractère suivant. Si l'utilisateur entre simplement "https", cela ne suffit pas.
Le même principe s'applique à d'autres protocoles tels que "ftp". Si la saisie ne correspond pas aux conditions requises, le navigateur fournit un retour et bloque l'envoi du formulaire.
7. Validation avancée avec des modèles pour les URL
Pour rendre la validation plus précise pour des modèles spécifiques comme "https://www.example.com", vous devriez également utiliser l'attribut "pattern" pour aider vos utilisateurs à saisir correctement les URLs.
8. Convivialité sur les appareils mobiles
Un grand avantage de l'utilisation des types "email" et "url" dans les formulaires est la convivialité améliorée sur les appareils mobiles. Le clavier est optimisé pour faciliter la saisie des adresses e-mail et des URL aux utilisateurs.
Résumé
Dans ce tutoriel, nous avons abordé les critères principaux de validation des adresses e-mail et des URL dans les formulaires web. Vous avez appris comment effectuer des validations simples et avancées, et comment personnaliser les retours utilisateurs via CSS pour créer une meilleure expérience utilisateur.
Foire aux questions
Que se passe-t-il si une adresse e-mail saisie est invalide?Si l'adresse e-mail est invalide, le formulaire ne peut pas être soumis et l'utilisateur voit un message d'erreur.
Comment puis-je m'assurer que l'URL saisie est correcte?Vous pouvez utiliser l'attribut "pattern" pour imposer des exigences spécifiques à l'URL, par exemple qu'elle commence par "http://" ou "https://".
Puis-je indiquer plusieurs adresses e-mail dans un champ?Oui, vous pouvez utiliser l'attribut "multiple" pour permettre aux utilisateurs d'entrer plusieurs adresses e-mail séparées par des virgules.
