TP : Mini-Projet 4 — Créer un Formulaire de
Contact avec Validation
Ce mini-projet vise à développer les compétences en HTML, CSS et JavaScript en créant un formulaire de contact
interactif et fonctionnel. Les apprenants concevront une interface utilisateur intuitive, appliqueront des styles CSS pour
une présentation attrayante, et ajouteront des fonctionnalités de validation JavaScript pour garantir l'intégrité des
données saisies. Ce projet couvre les aspects essentiels du développement web front-end, de la planification à la mise en
œuvre.
Objectifs et Contexte
Objectifs Objectifs Objectifs
Concevoir une interface Appliquer des styles CSS pour Ajouter des fonctionnalités de
utilisateur intuitive en HTML une présentation attrayante et validation des champs avec
pour un formulaire de contact. accessible. JavaScript pour garantir
l'intégrité des données saisies.
Les formulaires de contact sont omniprésents sur les sites web modernes. Ce projet permettra aux apprenants de créer
un formulaire fonctionnel où les utilisateurs peuvent soumettre leurs coordonnées et un message. Ce formulaire inclura
des mécanismes pour valider les données saisies, garantissant qu'elles respectent les exigences spécifiées.
Étape 1 : Planification et Conception (Facile)
Posez-vous les questions suivantes :
Quels champs doivent être inclus ? (Exemple : Nom, Email, Numéro de Téléphone, Message)
Quels champs sont obligatoires, et quels champs sont facultatifs ?
Quelle expérience souhaitez-vous offrir en cas d'erreur de saisie ? (Exemple : messages d'erreur clairs sous les
champs.)
Structure à prévoir :
Champs principaux :
Un champ pour le nom (<input type="text">).
Un champ pour l'email (<input type="email">).
Un champ pour le numéro de téléphone (<input type="tel">).
Une zone de texte pour le message (<textarea>).
Validation :
Utilisation d'attributs HTML comme required, minlength, maxlength, et pattern pour les validations de base.
Validation JavaScript pour des critères spécifiques (exemple : format d'email).
Bouton de soumission :
Ajoutez un bouton "Envoyer" avec une fonctionnalité de validation.
Recherches recommandées :
Étudiez les attributs HTML5 de validation (required, pattern, etc.).
Recherchez comment afficher des messages d'erreur personnalisés avec JavaScript.
Étape 2 : Création de la Structure HTML (Facile)
Éléments nécessaires (Commencer par <html><head><title><body>):
Un formulaire <form> avec des champs <input> et <textarea>
Exemple minimaliste :
<form id="contact-form">
<label for="name">Nom :</label>
<input type="text" id="name" name="name" required>
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
<label for="phone">Téléphone :</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}">
<label for="message">Message :</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Envoyer</button>
</form>
Recherches recommandées :
Étudiez comment utiliser les attributs HTML comme for dans <label> pour améliorer l'accessibilité.
Explorez les différences entre <input> et <textarea>
Étape 3 : Mise en Page avec CSS (Facile à Moyen)
Styles recommandés :
Assurez-vous que les champs du formulaire sont bien espacés pour améliorer la lisibilité.
Ajoutez des couleurs pour indiquer les erreurs (exemple : bordure rouge pour les champs invalides).
Exemple de base :
form {
width: 80%;
max-width: 500px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, textarea, button {
width: 100%;
margin-bottom: 15px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #4caf50;
color: white;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.error {
border-color: red;
background-color: #ffe5e5;
}
.success {
border-color: green;
background-color: #e5ffe5;
}
Recherches recommandées :
Étudiez les pseudo-classes CSS comme :hover et :focus pour améliorer l'expérience utilisateur.
Explorez l'utilisation de max-width et margin pour des mises en page fluides.
Étape 4 : Validation JavaScript (Moyen)
Concepts clés à explorer :
Ajoutez un gestionnaire d'événements pour vérifier les champs avant la soumission du formulaire.
Utilisez des expressions régulières pour valider des formats spécifiques (exemple : numéro de téléphone).
Étapes détaillées :
Validation de base :
Vérifiez que tous les champs obligatoires sont remplis.
Validation avancée :
Vérifiez que l'email a un format valide.
Vérifiez que le numéro de téléphone contient exactement 10 chiffres.
Affichage des erreurs :
Affichez des messages d'erreur près des champs invalides.
Ajoutez une classe CSS pour mettre en évidence les champs erronés.
Prévention de l'envoi si des erreurs subsistent :
Utilisez [Link]() pour empêcher l'envoi du formulaire si des champs sont invalides.
Recherches recommandées :
Explorez les événements JavaScript comme onsubmit et oninput.
Étudiez comment manipuler les classes CSS avec [Link] et [Link].
Étape 5 : Fonctionnalités Supplémentaires
(Moyen)
Extensions facultatives :
Ajoutez un champ de sélection pour le sujet du message (exemple : "Support technique", "Retour produit", etc.).
Incluez une option pour accepter les termes et conditions avec une case à cocher.
Affichez un message de confirmation après une soumission réussie (exemple : "Merci pour votre message !").
Recherches recommandées :
Étudiez l'utilisation de <select> et <option> pour les menus déroulants.
Recherchez comment afficher un message temporaire après une action avec setTimeout.
Critères d'Évaluation (100%)
Critère Description Pondération
Structure HTML propre Utilisation correcte des balises 20%
<form>,<label> ,<input> , etc.
Mise en page CSS attrayante Présentation visuelle claire et 20%
accessible.
Validation JavaScript efficace Fonctionnalités de validation 30%
fonctionnant correctement.
Gestion des erreurs utilisateur Indication claire des erreurs via 20%
CSS et messages contextuels.
Code clair et bien commenté Explications dans le code pour les 10%
étapes clés.
Conclusion et Perspectives
Ce projet vous a permis de concevoir un formulaire de contact fonctionnel et de renforcer vos compétences en HTML,
CSS et JavaScript. Vous avez appris à valider les données des utilisateurs pour garantir l'intégrité des informations. Ce
formulaire peut être une base pour des projets plus avancés, comme un formulaire connecté à une base de données ou
un service d'envoi de mails. Continuez à explorer et à expérimenter pour développer vos compétences !