Tu as besoin d'un accès internet pour pouvoir tester ces exercices. Chaque formulaire est posté vers un script sur un serveur qui te permettra de vérifier s'il est correct ou pas.
La partie javascript est facultative. C'est pour les plus courageux 😉 Elle permet d'avoir un aperçu de la façon dont on valide des formulaires avant de les envoyer sur un serveur et donc éviter des erreurs.
Objectif
Apprendre à créer un formulaire de base en HTML.
Instructions
- Créez un formulaire HTML avec les champs suivants :
- Prénom (input type="text")
- Nom (input type="text")
- Email (input type="email")
- Mot de passe (input type="password")
- Bouton de soumission (input type="submit")
Exemple de Code
<!DOCTYPE html>
<html>
<head>
<title>Formulaire Simple</title>
</head>
<body>
<form>
<label for="prenom">Prénom:</label>
<input type="text" id="prenom" name="prenom"><br><br>
<label for="nom">Nom:</label>
<input type="text" id="nom" name="nom"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Mot de passe:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Soumettre">
</form>
</body>
</html>
Objectif
Utiliser JavaScript pour valider les champs du formulaire avant la soumission.
Instructions
- Ajoutez une fonction JavaScript qui vérifie que tous les champs sont remplis avant de permettre la soumission du formulaire.
- Affichez un message d'erreur si un champ est vide.
Exemple de Code
<!DOCTYPE html>
<html>
<head>
<title>Validation de Formulaire</title>
<script>
function validerFormulaire() {
let prenom = document.getElementById("prenom").value;
let nom = document.getElementById("nom").value;
let email = document.getElementById("email").value;
let password = document.getElementById("password").value;
if (prenom == "" || nom == "" || email == "" || password == "") {
alert("Tous les champs doivent être remplis");
return false;
}
return true;
}
</script>
</head>
<body>
<form onsubmit="return validerFormulaire()">
<label for="prenom">Prénom:</label>
<input type="text" id="prenom" name="prenom"><br><br>
<label for="nom">Nom:</label>
<input type="text" id="nom" name="nom"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Mot de passe:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Soumettre">
</form>
</body>
</html>
Exercice 3 : Afficher les Données Soumises
Objectif
Afficher les données du formulaire après la soumission.
Instructions
- Modifiez le formulaire pour empêcher la soumission normale.
- Affichez les données dans une div sous le formulaire.
Exemple de Code
<!DOCTYPE html>
<html>
<head>
<title>Affichage des Données</title>
<script>
function afficherDonnees(event) {
event.preventDefault();
let prenom = document.getElementById("prenom").value;
let nom = document.getElementById("nom").value;
let email = document.getElementById("email").value;
let password = document.getElementById("password").value;
let result = "Prénom: " + prenom + "<br>" +
"Nom: " + nom + "<br>" +
"Email: " + email + "<br>" +
"Mot de passe: " + password;
document.getElementById("resultat").innerHTML = result;
}
</script>
</head>
<body>
<form onsubmit="afficherDonnees(event)">
<label for="prenom">Prénom:</label>
<input type="text" id="prenom" name="prenom"><br><br>
<label for="nom">Nom:</label>
<input type="text" id="nom" name="nom"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Mot de passe:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Soumettre">
</form>
<div id="resultat"></div>
</body>
</html>
Exercice 4 : Ajouter un Sélecteur de Genre
Objectif
Ajouter un champ de sélection (dropdown) pour le genre et afficher la sélection.
Instructions
- Ajoutez un champ de sélection pour le genre (Homme, Femme, Autre).
- Affichez la sélection dans la div des résultats.
Exemple de Code
<!DOCTYPE html>
<html>
<head>
<title>Formulaire avec Sélecteur</title>
<script>
function afficherDonnees(event) {
event.preventDefault();
let prenom = document.getElementById("prenom").value;
let nom = document.getElementById("nom").value;
let email = document.getElementById("email").value;
let password = document.getElementById("password").value;
let genre = document.getElementById("genre").value;
let result = "Prénom: " + prenom + "<br>" +
"Nom: " + nom + "<br>" +
"Email: " + email + "<br>" +
"Mot de passe: " + password + "<br>" +
"Genre: " + genre;
document.getElementById("resultat").innerHTML = result;
}
</script>
</head>
<body>
<form onsubmit="afficherDonnees(event)">
<label for="prenom">Prénom:</label>
<input type="text" id="prenom" name="prenom"><br><br>
<label for="nom">Nom:</label>
<input type="text" id="nom" name="nom"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Mot de passe:</label>
<input type="password" id="password" name="password"><br><br>
<label for="genre">Genre:</label>
<select id="genre" name="genre">
<option value="Homme">Homme</option>
<option value="Femme">Femme</option>
<option value="Autre">Autre</option>
</select><br><br>
<input type="submit" value="Soumettre">
</form>
<div id="resultat"></div>
</body>
</html>
Exercice 5 : Ajouter des Boutons Radio pour les Préférences
Objectif
Ajouter des boutons radio pour les préférences de contact (Email, Téléphone) et afficher la sélection.
Instructions
- Ajoutez des boutons radio pour les préférences de contact.
- Affichez la préférence choisie dans la div des résultats.
Exemple de Code
<!DOCTYPE html>
<html>
<head>
<title>Formulaire avec Boutons Radio</title>
<script>
function afficherDonnees(event) {
event.preventDefault();
let prenom = document.getElementById("prenom").value;
let nom = document.getElementById("nom").value;
let email = document.getElementById("email").value;
let password = document.getElementById("password").value;
let genre = document.getElementById("genre").value;
let contact = document.querySelector('input[name="contact"]:checked').value;
let result = "Prénom: " + prenom + "<br>" +
"Nom: " + nom + "<br>" +
"Email: " + email + "<br>" +
"Mot de passe: " + password + "<br>" +
"Genre: " + genre + "<br>" +
"Préférence de contact: " + contact;
document.getElementById("resultat").innerHTML = result;
}
</script>
</head>
<body>
<form onsubmit="afficherDonnees(event)">
<label for="prenom">Prénom:</label>
<input type="text" id="prenom" name="prenom"><br><br>
<label for="nom">Nom:</label>
<input type="text" id="nom" name="nom"><br><br>
<label for="email">Email:</label
>
<input type="email" id="email" name="email"><br><br>
<label for="password">Mot de passe:</label>
<input type="password" id="password" name="password"><br><br>
<label for="genre">Genre:</label>
<select id="genre" name="genre">
<option value="Homme">Homme</option>
<option value="Femme">Femme</option>
<option value="Autre">Autre</option>
</select><br><br>
<label>Préférence de contact:</label><br>
<input type="radio" id="contactEmail" name="contact" value="Email" checked>
<label for="contactEmail">Email</label><br>
<input type="radio" id="contactTelephone" name="contact" value="Téléphone">
<label for="contactTelephone">Téléphone</label><br><br>
<input type="submit" value="Soumettre">
</form>
<div id="resultat"></div>
</body>
</html>
Objectif
Ajouter une zone de texte pour les commentaires et afficher son contenu.
Instructions
- Ajoutez une zone de texte pour les commentaires.
- Affichez le contenu des commentaires dans la div des résultats.
Exemple de Code
<!DOCTYPE html>
<html>
<head>
<title>Formulaire avec Zone de Texte</title>
<script>
function afficherDonnees(event) {
event.preventDefault();
let prenom = document.getElementById("prenom").value;
let nom = document.getElementById("nom").value;
let email = document.getElementById("email").value;
let password = document.getElementById("password").value;
let genre = document.getElementById("genre").value;
let contact = document.querySelector('input[name="contact"]:checked').value;
let commentaires = document.getElementById("commentaires").value;
let result = "Prénom: " + prenom + "<br>" +
"Nom: " + nom + "<br>" +
"Email: " + email + "<br>" +
"Mot de passe: " + password + "<br>" +
"Genre: " + genre + "<br>" +
"Préférence de contact: " + contact + "<br>" +
"Commentaires: " + commentaires;
document.getElementById("resultat").innerHTML = result;
}
</script>
</head>
<body>
<form onsubmit="afficherDonnees(event)">
<label for="prenom">Prénom:</label>
<input type="text" id="prenom" name="prenom"><br><br>
<label for="nom">Nom:</label>
<input type="text" id="nom" name="nom"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Mot de passe:</label>
<input type="password" id="password" name="password"><br><br>
<label for="genre">Genre:</label>
<select id="genre" name="genre">
<option value="Homme">Homme</option>
<option value="Femme">Femme</option>
<option value="Autre">Autre</option>
</select><br><br>
<label>Préférence de contact:</label><br>
<input type="radio" id="contactEmail" name="contact" value="Email" checked>
<label for="contactEmail">Email</label><br>
<input type="radio" id="contactTelephone" name="contact" value="Téléphone">
<label for="contactTelephone">Téléphone</label><br><br>
<label for="commentaires">Commentaires:</label><br>
<textarea id="commentaires" name="commentaires"></textarea><br><br>
<input type="submit" value="Soumettre">
</form>
<div id="resultat"></div>
</body>
</html>
Exercice 7 : Compter les Caractères dans la Zone de Texte
Objectif
Ajouter un compteur de caractères pour la zone de texte des commentaires.
Instructions
- Ajoutez un compteur qui affiche le nombre de caractères saisis dans la zone de texte.
- Mettez à jour le compteur en temps réel.
Exemple de Code
<!DOCTYPE html>
<html>
<head>
<title>Compteur de Caractères</title>
<script>
function compterCaracteres() {
let commentaires = document.getElementById("commentaires").value;
let compteur = commentaires.length;
document.getElementById("compteur").innerText = "Caractères: " + compteur;
}
</script>
</head>
<body>
<form onsubmit="afficherDonnees(event)">
<label for="prenom">Prénom:</label>
<input type="text" id="prenom" name="prenom"><br><br>
<label for="nom">Nom:</label>
<input type="text" id="nom" name="nom"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Mot de passe:</label>
<input type="password" id="password" name="password"><br><br>
<label for="genre">Genre:</label>
<select id="genre" name="genre">
<option value="Homme">Homme</option>
<option value="Femme">Femme</option>
<option value="Autre">Autre</option>
</select><br><br>
<label>Préférence de contact:</label><br>
<input type="radio" id="contactEmail" name="contact" value="Email" checked>
<label for="contactEmail">Email</label><br>
<input type="radio" id="contactTelephone" name="contact" value="Téléphone">
<label for="contactTelephone">Téléphone</label><br><br>
<label for="commentaires">Commentaires:</label><br>
<textarea id="commentaires" name="commentaires" oninput="compterCaracteres()"></textarea><br>
<span id="compteur">Caractères: 0</span><br><br>
<input type="submit" value="Soumettre">
</form>
<div id="resultat"></div>
</body>
</html>
Exercice 8 : Créer un Champ Date et Afficher la Sélection
Objectif
Ajouter un champ de sélection de date et afficher la date choisie.
Instructions
- Ajoutez un champ de sélection de date.
- Affichez la date choisie dans la div des résultats.
Exemple de Code
<!DOCTYPE html>
<html>
<head>
<title>Formulaire avec Champ Date</title>
<script>
function afficherDonnees(event) {
event.preventDefault();
let prenom = document.getElementById("prenom").value;
let nom = document.getElementById("nom").value;
let email = document.getElementById("email").value;
let password = document.getElementById("password").value;
let genre = document.getElementById("genre").value;
let contact = document.querySelector('input[name="contact"]:checked').value;
let commentaires = document.getElementById("commentaires").value;
let date = document.getElementById("date").value;
let result = "Prénom: " + prenom + "<br>" +
"Nom: " + nom + "<br>" +
"Email: " + email + "<br>" +
"Mot de passe: " + password + "<br>" +
"Genre: " + genre + "<br>" +
"Préférence de contact: " + contact + "<br>" +
"Commentaires: " + commentaires + "<br>" +
"Date: " + date;
document.getElementById("resultat").innerHTML = result;
}
</script>
</head>
<body>
<form onsubmit="afficherDonnees(event)">
<label for="prenom">Prénom:</label>
<input type="text" id="prenom" name="prenom"><br><br>
<label for="nom">Nom:</label>
<input type="text" id="nom" name="nom"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Mot de passe:</label>
<input type="password" id="password" name="password"><br><br>
<label for="genre">Genre:</label>
<select id="genre" name="genre">
<option value="Homme">Homme</option>
<option value="Femme">Femme</option>
<option value="Autre">
Autre</option>
</select><br><br>
<label>Préférence de contact:</label><br>
<input type="radio" id="contactEmail" name="contact" value="Email" checked>
<label for="contactEmail">Email</label><br>
<input type="radio" id="contactTelephone" name="contact" value="Téléphone">
<label for="contactTelephone">Téléphone</label><br><br>
<label for="commentaires">Commentaires:</label><br>
<textarea id="commentaires" name="commentaires" oninput="compterCaracteres()"></textarea><br>
<span id="compteur">Caractères: 0</span><br><br>
<label for="date">Date:</label>
<input type="date" id="date" name="date"><br><br>
<input type="submit" value="Soumettre">
</form>
<div id="resultat"></div>
</body>
</html>
Exercice 9 : Utiliser un Checkbox pour les Conditions
Objectif
Ajouter une case à cocher pour accepter les conditions d'utilisation et valider qu'elle est cochée avant la soumission.
Instructions
- Ajoutez une case à cocher pour accepter les conditions d'utilisation.
- Empêchez la soumission du formulaire si la case n'est pas cochée.
Exemple de Code
<!DOCTYPE html>
<html>
<head>
<title>Conditions d'Utilisation</title>
<script>
function validerFormulaire() {
let prenom = document.getElementById("prenom").value;
let nom = document.getElementById("nom").value;
let email = document.getElementById("email").value;
let password = document.getElementById("password").value;
let genre = document.getElementById("genre").value;
let contact = document.querySelector('input[name="contact"]:checked').value;
let commentaires = document.getElementById("commentaires").value;
let date = document.getElementById("date").value;
let conditions = document.getElementById("conditions").checked;
if (prenom == "" || nom == "" || email == "" || password == "" || !conditions) {
alert("Tous les champs doivent être remplis et les conditions d'utilisation doivent être acceptées");
return false;
}
let result = "Prénom: " + prenom + "<br>" +
"Nom: " + nom + "<br>" +
"Email: " + email + "<br>" +
"Mot de passe: " + password + "<br>" +
"Genre: " + genre + "<br>" +
"Préférence de contact: " + contact + "<br>" +
"Commentaires: " + commentaires + "<br>" +
"Date: " + date;
document.getElementById("resultat").innerHTML = result;
return false;
}
</script>
</head>
<body>
<form onsubmit="return validerFormulaire()">
<label for="prenom">Prénom:</label>
<input type="text" id="prenom" name="prenom"><br><br>
<label for="nom">Nom:</label>
<input type="text" id="nom" name="nom"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Mot de passe:</label>
<input type="password" id="password" name="password"><br><br>
<label for="genre">Genre:</label>
<select id="genre" name="genre">
<option value="Homme">Homme</option>
<option value="Femme">Femme</option>
<option value="Autre">Autre</option>
</select><br><br>
<label>Préférence de contact:</label><br>
<input type="radio" id="contactEmail" name="contact" value="Email" checked>
<label for="contactEmail">Email</label><br>
<input type="radio" id="contactTelephone" name="contact" value="Téléphone">
<label for="contactTelephone">Téléphone</label><br><br>
<label for="commentaires">Commentaires:</label><br>
<textarea id="commentaires" name="commentaires" oninput="compterCaracteres()"></textarea><br>
<span id="compteur">Caractères: 0</span><br><br>
<label for="date">Date:</label>
<input type="date" id="date" name="date"><br><br>
<input type="checkbox" id="conditions" name="conditions">
<label for="conditions">J'accepte les conditions d'utilisation</label><br><br>
<input type="submit" value="Soumettre">
</form>
<div id="resultat"></div>
</body>
</html>
Exercice 10 : Ajouter une Liste de Sélection Multiple
Objectif
Ajouter une liste de sélection multiple pour choisir plusieurs options et afficher les choix.
Instructions
- Ajoutez une liste de sélection multiple avec quelques options.
- Affichez les options sélectionnées dans la div des résultats.
Exemple de Code
<!DOCTYPE html>
<html>
<head>
<title>Sélection Multiple</title>
<script>
function afficherDonnees(event) {
event.preventDefault();
let prenom = document.getElementById("prenom").value;
let nom = document.getElementById("nom").value;
let email = document.getElementById("email").value;
let password = document.getElementById("password").value;
let genre = document.getElementById("genre").value;
let contact = document.querySelector('input[name="contact"]:checked').value;
let commentaires = document.getElementById("commentaires").value;
let date = document.getElementById("date").value;
let conditions = document.getElementById("conditions").checked;
let options = document.getElementById("options").selectedOptions;
let selectedOptions = Array.from(options).map(option => option.value).join(", ");
if (prenom == "" || nom == "" || email == "" || password == "" || !conditions) {
alert("Tous les champs doivent être remplis et les conditions d'utilisation doivent être acceptées");
return false;
}
let result = "Prénom: " + prenom + "<br>" +
"Nom: " + nom + "<br>" +
"Email: " + email + "<br>" +
"Mot de passe: " + password + "<br>" +
"Genre: " + genre + "<br>" +
"Préférence de contact: " + contact + "<br>" +
"Commentaires: " + commentaires + "<br>" +
"Date: " + date + "<br>" +
"Options sélectionnées: " + selectedOptions;
document.getElementById("resultat").innerHTML = result;
return false;
}
</script>
</head>
<body>
<form onsubmit="return afficherDonnees(event)">
<label for="prenom">Prénom:</label>
<input type="text" id="prenom" name="prenom"><br><br>
<label for="nom">Nom:</label>
<input type="text" id="nom" name="nom"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Mot de passe:</label>
<input type="password" id="password" name="password"><br><br>
<label for="genre">Genre:</label>
<select id="genre" name="genre">
<option value="Homme">Homme</option>
<option value="Femme">Femme</option>
<option value="Autre">Autre</option>
</select><br><br>
<label>Préférence de contact:</label><br>
<input type="radio" id="contactEmail" name="contact" value="Email" checked>
<label for="contactEmail">Email</label><br>
<input type="radio" id="contactTelephone" name="contact" value="Téléphone">
<label for="contactTelephone">Téléphone</label><br><br>
<label for="commentaires">Commentaires:</label><br>
<textarea id="commentaires" name="commentaires" oninput="compterCaracteres()"></textarea><br>
<span id="compteur">Caractères: 0</span><br><br>
<label for="date">Date:</label>
<input type="date" id="date" name="date"><br><br>
<input type="checkbox" id="conditions" name="conditions">
<label for="conditions">J'accepte les conditions d'utilisation</label><br><br>
<label for="options">Options:</label>
<select id="options" name="options" multiple>
<option value="Option
1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>
</select><br><br>
<input type="submit" value="Soumettre">
</form>
<div id="resultat"></div>
</body>
</html>
Ces exercices aideront les élèves à se familiariser avec la création et la manipulation des formulaires HTML en utilisant JavaScript. En progressant de manière logique, les élèves pourront comprendre comment interagir avec différents types de champs de formulaire et valider les données saisies.
