Exercice Avancé : Formulaire d'Inscription avec Validation et Interaction Dynamique
Objectif :
Créer un formulaire HTML complexe avec validation avancée, interaction dynamique, et intégration de fonctionnalités modernes. Le formulaire doit inclure plusieurs types d'inputs et utiliser JavaScript pour des validations personnalisées et une interaction améliorée.
Travail à réaliser :
Champs de saisie :
Validation du mot de passe :
Boutons radio pour le choix du sexe :
Transfert de fichier photo :
Liste de choix pour les pays :
Liste de choix multiple pour les langages préférés :
Cases à cocher pour les domaines d'activités :
Fonctionnalités supplémentaires :
Consignes :
Exemple de formulaire :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulaire d'inscription Avancé</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.form-inscription {
background-color: #fff;
border-radius: 10px;
padding: 30px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 700px;
}
h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
label {
font-weight: bold;
margin-bottom: 5px;
display: inline-block;
}
input[type="text"],
input[type="email"],
input[type="file"],
select,
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
box-sizing: border-box;
}
input[type="radio"],
input[type="checkbox"] {
margin-right: 10px;
}
input[type="file"] {
border: none;
}
button {
width: 100%;
background-color: #007BFF;
color: #fff;
padding: 12px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
.radio-group,
.checkbox-group {
margin-bottom: 15px;
}
.info-text {
font-size: 14px;
color: #777;
}
.error {
color: red;
font-size: 14px;
}
input:valid {
background-color: #d4edda; /* Vert clair */
}
input:invalid {
background-color: #f8d7da; /* Rouge clair */
}
#photoPreview {
max-width: 45px;
max-height: 45px;
width: 45px; /* Fixe la largeur */
height: 45px; /* Fixe la hauteur */
object-fit: cover; /* Maintient les proportions sans déformation */
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="form-inscription">
<h2>Formulaire d'inscription Avancé</h2>
<form id="registrationForm" action="#" method="POST" enctype="multipart/form-data">
<!-- Nom -->
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" required placeholder="Entrez votre nom">
<div id="nomError" class="error"></div>
<!-- Prénom -->
<label for="prenom">Prénom :</label>
<input type="text" id="prenom" name="prenom" required placeholder="Entrez votre prénom">
<div id="prenomError" class="error"></div>
<!-- E-mail -->
<label for="email">E-mail :</label>
<input type="email" id="email" name="email" required placeholder="exemple@oudev.net">
<div id="emailError" class="error"></div>
<!-- Mot de passe -->
<label for="password">Mot de passe :</label>
<input type="password" id="password" name="password" required pattern="(?=.*\d)[A-Za-z\d]{6,8}" placeholder="6-8 caractères, inclure au moins un chiffre">
<div id="passwordError" class="error"></div>
<!-- Sexe (boutons radio) -->
<div class="radio-group">
<label>Sexe :</label>
<input type="radio" id="homme" name="sexe" value="homme" required>
<label for="homme">Homme</label>
<input type="radio" id="femme" name="sexe" value="femme">
<label for="femme">Femme</label>
</div>
<div id="sexeError" class="error"></div>
<!-- Transfert de fichier (photo) -->
<label for="photo">Photo (JPEG ou PNG) :</label>
<input type="file" id="photo" name="photo" accept=".jpeg, .jpg, .png" required>
<img id="photoPreview" alt="Aperçu de la photo">
<div id="photoError" class="error"></div>
<p class="info-text">Formats acceptés : JPEG, PNG, Taille max : 2 Mo</p>
<!-- Liste de choix pour les pays -->
<label for="pays">Pays :</label>
<select id="pays" name="pays" required>
<option value="">Sélectionnez un pays</option>
<option value="france">France</option>
<option value="algerie">Algérie</option>
<option value="canada">Canada</option>
<option value="belgique">Belgique</option>
</select>
<div id="paysInfo" class="info-text"></div>
<!-- Liste de choix multiple pour les langages -->
<label for="langages">Langages préférés :</label>
<select id="langages" name="langages[]" multiple size="4" required>
<option value="python">Python</option>
<option value="java">Java</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="c++">C++</option>
</select>
<p class="info-text">Maintenez "Ctrl" pour sélectionner plusieurs langages</p>
<!-- Cases à cocher pour les domaines d'activités -->
<div class="checkbox-group">
<label>Domaines d'activités :</label>
<input type="checkbox" id="informatique" name="domaines[]" value="informatique">
<label for="informatique">Informatique</label>
<input type="checkbox" id="medecine" name="domaines[]" value="medecine">
<label for="medecine">Médecine</label>
<input type="checkbox" id="education" name="domaines[]" value="education">
<label for="education">Éducation</label>
</div>
<div id="domainesError" class="error"></div>
<!-- Bouton de soumission -->
<button type="submit">S'inscrire</button>
</form>
</div>
</div>
<script>
document.getElementById('registrationForm').addEventListener('submit', function(event) {
let valid = true;
// Validation des champs de texte
const nom = document.getElementById('nom');
const prenom = document.getElementById('prenom');
const email = document.getElementById('email');
const password = document.getElementById('password');
const sexe = document.querySelector('input[name="sexe"]:checked');
const photo = document.getElementById('photo');
const domaines = document.querySelectorAll('input[name="domaines[]"]:checked');
// Validation nom
if (!/^[a-zA-Z]+$/.test(nom.value)) {
document.getElementById('nomError').textContent = 'Le nom ne doit contenir que des lettres.';
valid = false;
} else {
document.getElementById('nomError').textContent = '';
}
// Validation prénom
if (!/^[a-zA-Z]+$/.test(prenom.value)) {
document.getElementById('prenomError').textContent = 'Le prénom ne doit contenir que des lettres.';
valid = false;
} else {
document.getElementById('prenomError').textContent = '';
}
// Validation e-mail
if (!/^[\w._%+-]+@oudev\.net$/.test(email.value)) {
document.getElementById('emailError').textContent = 'L\'e-mail doit se terminer par "oudev.net".';
valid = false;
} else {
document.getElementById('emailError').textContent = '';
}
// Validation mot de passe
if (!password.value.match(/^(?=.*\d)[A-Za-z\d]{6,8}$/)) {
document.getElementById('passwordError').textContent = 'Le mot de passe doit contenir entre 6 et 8 caractères, dont au moins un chiffre.';
valid = false;
} else {
document.getElementById('passwordError').textContent = '';
}
// Validation sexe
if (!sexe) {
document.getElementById('sexeError').textContent = 'Veuillez sélectionner un sexe.';
valid = false;
} else {
document.getElementById('sexeError').textContent = '';
}
// Validation photo
if (photo.files.length > 0) {
const file = photo.files[0];
if (file.size > 2 * 1024 * 1024) {
document.getElementById('photoError').textContent = 'La taille du fichier ne doit pas dépasser 2 Mo.';
valid = false;
} else if (!/\.(jpg|jpeg|png)$/i.test(file.name)) {
document.getElementById('photoError').textContent = 'Le fichier doit être au format JPEG ou PNG.';
valid = false;
} else {
document.getElementById('photoError').textContent = '';
}
} else {
document.getElementById('photoError').textContent = 'Veuillez sélectionner une photo.';
valid = false;
}
// Validation domaines d'activités
if (domaines.length === 0) {
document.getElementById('domainesError').textContent = 'Veuillez sélectionner au moins un domaine d\'activité.';
valid = false;
} else {
document.getElementById('domainesError').textContent = '';
}
if (!valid) {
event.preventDefault(); // Empêche l'envoi du formulaire si les validations échouent
}
});
// Affichage de prévisualisation de la photo
document.getElementById('photo').addEventListener('change', function() {
const file = this.files[0];
const preview = document.getElementById('photoPreview');
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
preview.src = e.target.result;
preview.style.display = 'block';
};
reader.readAsDataURL(file);
} else {
preview.src = '';
preview.style.display = 'none';
}
});
// Affichage dynamique des informations sur les pays
document.getElementById('pays').addEventListener('change', function() {
const paysInfo = document.getElementById('paysInfo');
const selectedCountry = this.value;
if (selectedCountry) {
// Exemples d'informations supplémentaires
const info = {
'france': 'Code : FR, Langue : Français',
'algerie': 'Code : DZ, Langue : Arabe',
'canada': 'Code : CA, Langue : Anglais, Français',
'belgique': 'Code : BE, Langue : Français, Néerlandais'
};
paysInfo.textContent = info[selectedCountry] || '';
} else {
paysInfo.textContent = '';
}
});
</script>
</body>
</html>
Ajouter un commentaire
Veuillez vous connecter pour ajouter un commentaire.
oudevnet
Sept. 13, 2024, 10:32 p.m.si vous souhaitez de tels exercices dites-le-nous dans commentaires