L’élément <input type="email"> est largement utilisé dans les formulaires HTML pour collecter des adresses e-mail. Ce champ input type email, bien qu’il offre une validation de base, ne suffit pas à garantir des données sécurisées et fiables. Dans cet article, nous allons :
- Créer un formulaire en HTML en utilisant le type email.
- Expliquer les limites de l’input type email, notamment en matière de validation.
- Vérifier le contenu en temps réel avec JavaScript côté client pour améliorer l’expérience utilisateur.
- Effectuer une validation approfondie avec PHP côté serveur afin de sécuriser les données et empêcher les soumissions incorrectes.
Grâce à ces bonnes pratiques, vous serez en mesure de renforcer la fiabilité de vos formulaires et d’éviter les erreurs courantes liées à la saisie des adresses e-mail.
Coder un formulaire avec un champ input type email en HTML
Les formulaires HTML sont essentiels pour recueillir des informations auprès des utilisateurs. Parmi les types d’inputs les plus utilisés, l’input de type email est conçu spécialement pour collecter des adresses e-mail. Voyons comment créer un formulaire simple avec ce champ et un bouton d’envoi.
1. Structure du formulaire en HTML
Voici un formulaire basique avec un champ email et un bouton d’envoi :
<form action="traitement.php" method="post">
<label for="email">Votre adresse e-mail :</label>
<input type="email" id="email" name="email" required>
<button type="submit">Envoyer</button>
</form> 2. Explication du code
<form>: Il sert à regrouper les champs et définit où envoyer les données (ici, verstraitement.php).action="traitement.php": Indique le fichier où les données seront envoyées pour traitement.method="post": Utilise la méthode POST pour transmettre les données de manière sécurisée.<label>: Associe un texte au champ pour indiquer à l’utilisateur ce qu’il doit saisir.<input type="email">: Ce champ est conçu pour les adresses e-mail. Il aide le navigateur à valider la saisie.required: Rend le champ obligatoire (le formulaire ne peut pas être soumis si le champ est vide).<button type="submit">: Permet d’envoyer les données du formulaire.
3. Comment fonctionne l’input type= »email » ?
L’input de type email possède des fonctionnalités spécifiques :
- Il empêche l’utilisateur de soumettre une adresse e-mail mal formée (exemple : test@ sans domaine).
- Sur mobile, il affiche un clavier optimisé avec le symbole @ et le .com pour une saisie plus rapide.
- Il peut être complété par l’attribut
placeholder="Entrez votre email"pour guider l’utilisateur.
Cependant, cette validation reste basique et peut être contournée. Pour une vérification plus fiable, il est nécessaire d’ajouter une validation en JavaScript côté client et en PHP côté serveur, ce que nous verrons dans la suite de cet article.
En résumé, un champ <input type="email"> facilite la saisie et améliore l’expérience utilisateur, mais ne garantit pas à lui seul la validité des adresses e-mail. Dans les prochaines étapes, nous verrons comment renforcer cette validation avec du JavaScript et PHP.
Les limites de la validation d’un champ input type email en HTML
L’utilisation d’un champ <input type="email"> dans un formulaire HTML offre une première couche de validation pour s’assurer que l’utilisateur entre une adresse e-mail. Cependant, cette validation reste limitée et ne garantit pas que l’adresse saisie soit réellement valide. Voyons en détail les principales limites de ce type d’input.
1. Une vérification basée uniquement sur le format
Le champ <input type="email"> vérifie uniquement si la valeur saisie respecte un format correct, c’est-à-dire une structure semblable à :
nom@domaine.extensionAinsi, les adresses suivantes seront considérées comme valides par le navigateur :
- ✅
exemple@email.com - ✅
contact@domaine.fr
Mais attention, certaines adresses incorrectes peuvent aussi passer la validation HTML :
- ✅
test@exemple(aucune extension de domaine requise) - ✅
@domaine.com(pas de nom d’utilisateur avant@)
Cela signifie que l’input HTML ne vérifie pas si l’adresse e-mail existe réellement ou si elle peut recevoir des messages.
2. Aucune vérification côté serveur
La validation HTML fonctionne uniquement côté client (dans le navigateur). Un utilisateur malveillant peut désactiver la validation en manipulant le formulaire, par exemple :
- En modifiant le code HTML via l’outil de développement du navigateur.
- En envoyant directement une requête au serveur sans passer par le formulaire.
Si le serveur ne fait pas sa propre validation, des adresses invalides peuvent être enregistrées dans la base de données ou utilisées pour envoyer des e-mails.
3. Pas de protection contre les e-mails temporaires ou frauduleux
Il existe des services permettant de générer des adresses e-mail temporaires ou jetables (ex. test@mailinator.com). L’input type="email" ne peut pas détecter ce type d’adresses, ce qui peut poser problème dans certains cas (inscriptions frauduleuses, spam, etc.).
4. Absence de validation des caractères spéciaux
Certains caractères spéciaux sont autorisés dans les adresses e-mail (comme + ou .), mais l’input HTML ne permet pas de contrôler ces variations spécifiques. Par exemple, les adresses suivantes sont valides :
- ✅
nom.prenom@example.com - ✅
nom+alias@example.com
Dans certains contextes, il peut être utile d’accepter ou de refuser certaines variantes (par exemple, bloquer les adresses contenant + si elles sont souvent utilisées pour du spam).
5. Une validation incomplète sur certains navigateurs
Bien que la plupart des navigateurs modernes prennent en charge la validation des e-mails, il peut y avoir des différences d’implémentation. Certains anciens navigateurs peuvent ne pas appliquer correctement cette vérification, ce qui rend la validation HTML peu fiable si elle est utilisée seule.
L’input type="email" est un bon point de départ pour valider un champ e-mail, mais il ne remplace pas une validation plus poussée en JavaScript et PHP. Pour assurer une meilleure sécurité et éviter les erreurs, il est recommandé de :
✔️ Ajouter une validation en JavaScript pour détecter les erreurs avant l’envoi du formulaire.
✔️ Effectuer une validation plus stricte côté serveur en PHP pour éviter les abus.
✔️ Vérifier la validité des adresses en utilisant un service de validation d’e-mails si nécessaire.
Nous allons donc voir comment renforcer cette validation avec JavaScript et PHP.
Vérifier la validité d’une adresse e-mail en JavaScript
La validation en JavaScript permet de vérifier la saisie d’un champ input type="email" avant d’envoyer les données au serveur. Cela améliore l’expérience utilisateur en affichant des erreurs en temps réel sans avoir à recharger la page.
1. Vérification avec la validation HTML intégrée
Le navigateur propose déjà une validation de base grâce à type="email". Vous pouvez l’exploiter avec JavaScript en utilisant la méthode .checkValidity().
Voici un exemple simple :
document.getElementById("email").addEventListener("input", function () {
if (this.checkValidity()) {
console.log("Adresse e-mail valide !");
} else {
console.log("Adresse e-mail invalide !");
}
}); Avantage : Utilise directement la validation du navigateur.
⚠️ Limite : Ne vérifie que le format, pas l’existence réelle de l’e-mail.
2. Vérification avec une expression régulière (Regex)
Une expression régulière (regex) permet d’effectuer une vérification plus stricte. Voici une regex couramment utilisée :
function isValidEmail(email) {
const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
return regex.test(email);
}
document.getElementById("email").addEventListener("input", function () {
if (isValidEmail(this.value)) {
console.log("Adresse e-mail valide !");
} else {
console.log("Adresse e-mail invalide !");
}
}); Avantage : Vérifie plus strictement la structure de l’e-mail.
⚠️ Limite : Toujours pas de vérification sur l’existence réelle de l’e-mail.
Des formations informatique pour tous !
Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…
Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.
Découvrez mes formations Qui suis-je ?3. Affichage d’un message d’erreur en temps réel
Ajoutons maintenant un message d’erreur sous le champ lorsque l’adresse est invalide.
const emailInput = document.getElementById("email");
const errorMessage = document.getElementById("error-message");
emailInput.addEventListener("input", function () {
if (isValidEmail(this.value)) {
errorMessage.textContent = ""; // Pas d'erreur
} else {
errorMessage.textContent = "Veuillez entrer une adresse e-mail valide.";
}
});
function isValidEmail(email) {
const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
return regex.test(email);
} HTML associé
<form>
<label for="email">Votre adresse e-mail :</label>
<input type="email" id="email" required>
<span id="error-message" style="color: red;"></span>
<button type="submit">Envoyer</button>
</form> Avantage : Expérience utilisateur améliorée avec une alerte immédiate.
4. Vérification avant l’envoi du formulaire
Pour empêcher la soumission d’une adresse e-mail invalide, on peut intercepter l’envoi du formulaire avec event.preventDefault().
document.getElementById("form").addEventListener("submit", function (event) {
const email = document.getElementById("email").value;
if (!isValidEmail(email)) {
event.preventDefault(); // Empêche l'envoi du formulaire
errorMessage.textContent = "Veuillez entrer une adresse e-mail valide avant de soumettre.";
}
}); HTML mis à jour
<form id="form">
<label for="email">Votre adresse e-mail :</label>
<input type="email" id="email" required>
<span id="error-message" style="color: red;"></span>
<button type="submit">Envoyer</button>
</form> Avantage : Empêche l’envoi de données incorrectes au serveur.
- Méthode HTML (
checkValidity()) : Basique mais utile. - Méthode Regex (
test()) : Plus stricte, mais pas infaillible. - Validation en temps réel : Améliore l’expérience utilisateur.
- Empêcher la soumission (
preventDefault()) : Sécurise l’envoi.
🔹 Prochaine étape : Pour une sécurité optimale, il faut valider l’e-mail côté serveur en PHP, car JavaScript peut être contourné par un utilisateur malveillant.
Pourquoi sécuriser également le champ <input type="email"> en PHP ?
Bien que la validation côté client avec JavaScript soit utile pour améliorer l’expérience utilisateur et empêcher des erreurs évidentes avant l’envoi du formulaire, elle ne suffit pas à garantir la sécurité des données. JavaScript peut être facilement contourné par un utilisateur malveillant qui désactive les scripts dans son navigateur ou manipule directement le formulaire.
C’est là qu’intervient la validation côté serveur en PHP, qui permet de sécuriser de manière robuste et fiable le traitement des données. Voici pourquoi il est crucial de valider et sécuriser un champ input type email en PHP :
1. Validation infaillible côté serveur
La validation côté serveur est essentielle car elle ne peut pas être contournée. Peu importe si l’utilisateur manipule le code HTML ou désactive JavaScript, les données envoyées au serveur sont toujours vérifiées.
En PHP, vous pouvez appliquer des règles strictes pour vérifier non seulement le format de l’adresse e-mail, mais aussi pour effectuer des vérifications supplémentaires comme la syntaxe, la validité du domaine, ou même l’existence réelle de l’adresse e-mail (par exemple en utilisant des API externes de validation d’e-mails).
2. Protection contre l’injection de code malveillant
Les utilisateurs malveillants peuvent tenter d’envoyer des données contenant du code malveillant, comme des scripts ou des commandes SQL. Par exemple, un champ e-mail pourrait être utilisé pour injecter du code JavaScript ou du code SQL si la validation côté serveur n’est pas mise en place.
Voici un exemple de donnée malveillante :
<script>alert('Hacked!');</script>En PHP, on peut éviter cela en utilisant des fonctions comme filter_var() et htmlspecialchars() pour assainir l’input avant de l’utiliser dans le système.
3. Validation plus stricte avec filter_var()
PHP propose des fonctions dédiées pour valider des champs spécifiques, comme filter_var() avec le filtre FILTER_VALIDATE_EMAIL, qui vérifie non seulement le format de l’adresse e-mail, mais aussi certaines règles supplémentaires comme la présence d’un domaine et une extension valide.
Exemple de validation PHP :
$email = $_POST['email'];
if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "Adresse e-mail valide !";
} else {
echo "Adresse e-mail invalide.";
} Avantage : Cette méthode permet d’être beaucoup plus rigoureux sur le format de l’adresse e-mail qu’avec l’input HTML ou même avec JavaScript.
4. Protéger contre le spam et les adresses temporaires
Les utilisateurs peuvent parfois entrer des adresses e-mail temporaires ou de spam dans les formulaires. Bien que l’input HTML ne puisse pas détecter ces types d’adresses, il est possible d’ajouter une validation en PHP pour vérifier si l’adresse e-mail provient d’un domaine suspect ou d’un service de génération d’e-mails temporaires (par exemple, mailinator.com ou tempmail.com).
5. Améliorer la sécurité des applications web
En fin de compte, la validation côté serveur en PHP est une partie essentielle de la sécurité des applications web. Sans cette validation, même si la validation HTML et JavaScript semble fonctionner, il existe toujours un risque que des données invalides ou malveillantes parviennent au serveur. Le serveur doit toujours être prêt à valider et nettoyer toutes les données qu’il reçoit avant de les utiliser, par exemple, dans une base de données ou dans un envoi d’e-mail.
6. Exemple de validation complète en PHP
Voici un exemple de code PHP plus complet pour sécuriser un champ input type email en validant le format et en assainissant les données :
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$email = trim($_POST['email']); // Vérification du format e-mail
if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
// Assainissement des données pour éviter les injections
$email = htmlspecialchars($email);
echo "Adresse e-mail validée et sécurisée : $email";
} else {
echo "Adresse e-mail invalide.";
}
} Dans cet exemple, nous utilisons trim() pour enlever les espaces inutiles, filter_var() pour valider le format, et htmlspecialchars() pour assainir les données et prévenir les injections XSS (Cross-Site Scripting).
Conclusion
La validation côté client avec JavaScript est utile pour améliorer l’expérience utilisateur, mais elle n’est pas suffisante pour garantir la sécurité et l’intégrité des données. La validation côté serveur en PHP permet de renforcer cette sécurité, d’empêcher les attaques malveillantes, et de s’assurer que les données reçues sont valides et fiables.
Il est donc indispensable de toujours valider et assainir les données côté serveur, peu importe les contrôles effectués en amont côté client.
Pour en savoir plus sur la validation d’une adresse mail en PHP, consultez notre guide pour Vérifier et valider une adresse mail en PHP.
- 🔥 Vendredi 25 Avril 2025 >19h00
HTML & SémantiqueStructure d'une page HTML
