Alexandre_1a/NSI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finished the form, create the logic and style it

Browse Source
This commit is contained in:
Alexandre 2025-03-22 01:31:04 +01:00
parent e52bf4d0af
commit 0d489806b1
2 changed files with 185 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
15 - langage HTML/4 - Formulaires/files/index.html
View File

@ -1,41 +1,93 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css" />
<script src="script.js"> <script src="script.js"></script>
</script>
</head> </head>
<body> <body>
<div class="mainContainer"> <div class="mainContainer">
<h1> <h1>Formulaire d'inscription</h1>
Formulaire d'inscription
</h1>
<form method="GET" action=""> <form method="GET" action="">
<p> <p>
<label for="pseudo">Pseudo : </label> <label for="pseudo">Pseudo : </label>
<input type="text" name="pseudo" id="pseudo_field" minlength="4" maxlength="8" onfocus="afficheAide('pseudo');" onblur="deleteAide('pseudo');" required> <input
type="text"
name="pseudo"
id="pseudo_field"
minlength="4"
maxlength="8"
onfocus="afficheAide('pseudo');"
onblur="deleteAide('pseudo');"
required
/>
<span id="pseudo"></span> <span id="pseudo"></span>
</p> </p>
<p> <p>
<label for="password">Mot de passe : </label> <label for="password">Mot de passe : </label>
<input type="password" name="password" id="password_field" minlength="8" onfocus="afficheAide('password');" onblur="deleteAide('password');" required> <input
type="password"
name="password"
id="password_field"
minlength="8"
onfocus="afficheAide('password');"
onblur="deleteAide('password');"
required
/>
<span id="password"></span> <span id="password"></span>
</p> </p>
<p> <p>
<label for="email">Email : </label> <label for="email">Email : </label>
<input type="email" name="email" id="email_field" maxlength="30" placeholder="utilisateur@domaine.fr" required> <input
type="email"
name="email"
id="email_field"
maxlength="30"
placeholder="utilisateur@domaine.fr"
onfocus="afficheAide('email');"
onblur="deleteAide('email');"
required
/>
<span id="email"></span> <span id="email"></span>
</p> </p>
<p> <p>
<input type="checkbox" name="confirm" id="1" value="confirm"> <input
type="checkbox"
name="confirm"
id="1"
value="confirm"
/>
<label for="1">M'envoyer un courrier de confirmation</label> <label for="1">M'envoyer un courrier de confirmation</label>
</p> </p>
<p>
<input type="radio" name="sub" id="1" value="A" />
<label for="1">
M'aboner à la newsletter et aux promotions
</label>
<br />
<input type="radio" name="sub" id="2" value="P" />
<label for="2">
M'abonner uniquement à la newsletter
</label>
<br />
<input type="radio" name="sub" id="3" value="N" checked />
<label for="3"> Ne pas m'abonner </label>
<!-- A= All, P=Partial, N=None-- -->
</p>
<p>
<select name="nationalite" id="NAliste">
<option value="Francaise">Francaise</option>
<option value="Belge">Belge</option>
<option value="Suisse">Suisse</option>
<option value="Autre">Autre</option>
</select>
</p>
<p>
<input type="submit" value="Valider" onclick="confirm();" />
<input type="button" value="Annuler" onclick="cancel();" />
</p>
</form> </form>
</div> </div>
</body> </body>
</html> </html>

84
15 - langage HTML/4 - Formulaires/files/script.js
View File

@ -1,12 +1,22 @@
function afficheEntree(id) { function afficheEntree(id) {
const texte = document.querySelector(id).value const texte = document.querySelector(id).value;
alert('Affichage avec alert: ' + texte) alert("Affichage avec alert: " + texte);
} }
function afficheAide(champ) { function afficheAide(champ) {
if (champ == "pseudo") { if (champ == "pseudo") {
var id = "#pseudo"; var id = "#pseudo";
document.querySelector(id).innerHTML = "Saisir un pseudo. Il doit être compris entre 4 et 8 caractères"; 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";
} }
} }
@ -15,28 +25,68 @@ function deleteAide(champ) {
var id = "#pseudo"; var id = "#pseudo";
document.querySelector(id).innerHTML = ""; document.querySelector(id).innerHTML = "";
} }
if (champ == "pseudo") {
var id = "#pseudo";
document.querySelector(id).innerHTML = "";
} }
if (champ == "password") {
function afficheLangue() { var id = "#password";
if (document.getElementsByName("langue")[0].checked == true) { document.querySelector(id).innerHTML = "";
alert("Vous étudiez l'allemand");
} }
if (document.getElementsByName("langue")[1].checked == true) { if (champ == "email") {
alert("Vous étudiez l'anglais"); var id = "#email";
} document.querySelector(id).innerHTML = "";
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() { function afficheSexe() {
if (document.getElementsByName("sexe")[0].checked == true) { if (document.getElementsByName("sub")[0].checked == true) {
alert("Bonjour, chère dame, t'as un snap ?"); alert("Bonjour, chère dame, t'as un snap ?");
} }
if (document.getElementsByName("sexe")[1].checked == true) { if (document.getElementsByName("sub")[1].checked == true) {
alert("Bonjour, vous"); 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);
}