From 0d489806b16cf3a05956724d6ad71858f62f2630 Mon Sep 17 00:00:00 2001 From: Alexandre Date: Sat, 22 Mar 2025 01:31:04 +0100 Subject: [PATCH] Finished the form, create the logic and style it --- .../4 - Formulaires/files/index.html | 134 ++++++++++++------ .../4 - Formulaires/files/script.js | 134 ++++++++++++------ 2 files changed, 185 insertions(+), 83 deletions(-) diff --git a/15 - langage HTML/4 - Formulaires/files/index.html b/15 - langage HTML/4 - Formulaires/files/index.html index d0e89e4..fbf6bca 100644 --- a/15 - langage HTML/4 - Formulaires/files/index.html +++ b/15 - langage HTML/4 - Formulaires/files/index.html @@ -1,41 +1,93 @@ - - - - - - - - - - -
-

- Formulaire d'inscription -

-
-

- - - -

-

- - - -

-

- - - -

-

- - -

-
-
- - - - \ No newline at end of file + + + + + + + + + +
+

Formulaire d'inscription

+
+

+ + + +

+

+ + + +

+

+ + + +

+

+ + +

+

+ + +
+ + +
+ + + +

+

+ +

+

+ + +

+
+
+ + diff --git a/15 - langage HTML/4 - Formulaires/files/script.js b/15 - langage HTML/4 - Formulaires/files/script.js index ce0fc7c..2d19699 100644 --- a/15 - langage HTML/4 - Formulaires/files/script.js +++ b/15 - langage HTML/4 - Formulaires/files/script.js @@ -1,42 +1,92 @@ -function afficheEntree(id) { - const texte = document.querySelector(id).value - alert('Affichage avec alert: ' + texte) -} - -function afficheAide(champ) { - if (champ == "pseudo") { - var id = "#pseudo"; - document.querySelector(id).innerHTML = "Saisir un pseudo. Il doit être compris entre 4 et 8 caractères"; - } -} - -function deleteAide(champ) { - if (champ == "pseudo") { - var id = "#pseudo"; - document.querySelector(id).innerHTML = ""; - } -} - -function afficheLangue() { - if (document.getElementsByName("langue")[0].checked == true) { - alert("Vous étudiez l'allemand"); - } - if (document.getElementsByName("langue")[1].checked == true) { - alert("Vous étudiez l'anglais"); - } - if (document.getElementsByName("langue")[2].checked == true) { - alert("Vous étudiez l'espagnol"); - } - if (document.getElementsByName("langue")[3].checked == true) { - alert("Vous étudiez l'italien"); - } -} - -function afficheSexe() { - if (document.getElementsByName("sexe")[0].checked == true) { - alert("Bonjour, chère dame, t'as un snap ?"); - } - if (document.getElementsByName("sexe")[1].checked == true) { - alert("Bonjour, vous"); - } -} \ No newline at end of file +function afficheEntree(id) { + const texte = document.querySelector(id).value; + alert("Affichage avec alert: " + texte); +} + +function afficheAide(champ) { + if (champ == "pseudo") { + var id = "#pseudo"; + document.querySelector(id).innerHTML = + "Saisir un pseudo. Il doit être compris entre 4 et 8 caractères"; + } + if (champ == "password") { + var id = "#password"; + document.querySelector(id).innerHTML = + "Saisir le mot de passe. Il doit être constitué d'au moins 8 caractères"; + } + if (champ == "email") { + var id = "#email"; + document.querySelector(id).innerHTML = "Saisir une adresse email valide"; + } +} + +function deleteAide(champ) { + if (champ == "pseudo") { + var id = "#pseudo"; + document.querySelector(id).innerHTML = ""; + } + if (champ == "pseudo") { + var id = "#pseudo"; + document.querySelector(id).innerHTML = ""; + } + if (champ == "password") { + var id = "#password"; + document.querySelector(id).innerHTML = ""; + } + if (champ == "email") { + var id = "#email"; + document.querySelector(id).innerHTML = ""; + } +} + +function afficheSexe() { + if (document.getElementsByName("sub")[0].checked == true) { + alert("Bonjour, chère dame, t'as un snap ?"); + } + if (document.getElementsByName("sub")[1].checked == true) { + alert("Bonjour, vous"); + } +} + +function cancel() { + alert("Inscription annulée !"); +} + +function confirm() { + // Récupére les données + const pseudo = document.getElementById("pseudo_field").value; + const password = document.getElementById("password_field").value; + const email = document.getElementById("email_field").value; + const wantsConfirmation = document.querySelector('input[name="confirm"]') + .checked + ? "Oui" + : "Non"; + const subscription = document.querySelector( + 'input[name="sub"]:checked', + ).value; + const nationality = document.getElementById("NAliste").value; + + // Mappe les valeurs à du texte + const subscriptionLabels = { + A: "M'abonner à la newsletter et aux promotions", + P: "M'abonner uniquement à la newsletter", + N: "Ne pas m'abonner", + }; + + // Construie le message + const message = + "Pseudo: " + + pseudo + + "\nMot de passe: " + + password + + "\nEmail: " + + email + + "\nConfirmation email: " + + wantsConfirmation + + "\nAbonnement: " + + subscriptionLabels[subscription] + + "\nNationalité: " + + nationality; + + alert(message); +}