Finished the form, create the logic and style it
This commit is contained in:
Alexandre
parent
e52bf4d0af
commit
0d489806b1
@ -1,41 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="script.js">
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="mainContainer">
|
||||
<h1>
|
||||
Formulaire d'inscription
|
||||
</h1>
|
||||
<form method="GET" action="">
|
||||
<p>
|
||||
<label for="pseudo">Pseudo : </label>
|
||||
<input type="text" name="pseudo" id="pseudo_field" minlength="4" maxlength="8" onfocus="afficheAide('pseudo');" onblur="deleteAide('pseudo');" required>
|
||||
<span id="pseudo"></span>
|
||||
</p>
|
||||
<p>
|
||||
<label for="password">Mot de passe : </label>
|
||||
<input type="password" name="password" id="password_field" minlength="8" onfocus="afficheAide('password');" onblur="deleteAide('password');" required>
|
||||
<span id="password"></span>
|
||||
</p>
|
||||
<p>
|
||||
<label for="email">Email : </label>
|
||||
<input type="email" name="email" id="email_field" maxlength="30" placeholder="utilisateur@domaine.fr" required>
|
||||
<span id="email"></span>
|
||||
</p>
|
||||
<p>
|
||||
<input type="checkbox" name="confirm" id="1" value="confirm">
|
||||
<label for="1">M'envoyer un courrier de confirmation</label>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<script src="script.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="mainContainer">
|
||||
<h1>Formulaire d'inscription</h1>
|
||||
<form method="GET" action="">
|
||||
<p>
|
||||
<label for="pseudo">Pseudo : </label>
|
||||
<input
|
||||
type="text"
|
||||
name="pseudo"
|
||||
id="pseudo_field"
|
||||
minlength="4"
|
||||
maxlength="8"
|
||||
onfocus="afficheAide('pseudo');"
|
||||
onblur="deleteAide('pseudo');"
|
||||
required
|
||||
/>
|
||||
<span id="pseudo"></span>
|
||||
</p>
|
||||
<p>
|
||||
<label for="password">Mot de passe : </label>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
id="password_field"
|
||||
minlength="8"
|
||||
onfocus="afficheAide('password');"
|
||||
onblur="deleteAide('password');"
|
||||
required
|
||||
/>
|
||||
<span id="password"></span>
|
||||
</p>
|
||||
<p>
|
||||
<label for="email">Email : </label>
|
||||
<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>
|
||||
</p>
|
||||
<p>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="confirm"
|
||||
id="1"
|
||||
value="confirm"
|
||||
/>
|
||||
<label for="1">M'envoyer un courrier de confirmation</label>
|
||||
</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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -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");
|
||||
}
|
||||
}
|
||||
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);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user