Code Complet Projet2

Matière : STI Prof : Mme Asma Briki
Domaine d’apprentissage : Systèmes & technologies de l’informatique
Partie I : Création d’un site web statique
Fiche du projet 2
Classe : 4ème SI1/2 Lycée Hmida Bakir Mnihla
Inscription.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="test.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="#">Inscription </a></li>
<li><a href="#">Commande </a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Projet 3 : CSS3 4ème SI Lycée Hamida bakir
<section>
<form
name="F"
action="validation.html"
method="POST"
onsubmit="return verif()"
>
<fieldset class="cadre">
<legend class="leg">Inscription</legend>
<label>Nom</label>
<input type="text" name="nom" class="champ" id="n" placeholder="Votre Nom "
onfocus="vider_msg()" /><br />
<label>Prénom</label>
<input type="text" name="prenom" class="champ" id="p"

placeholder="Votre Prenom " onfocus="vider_msg()" /><br />
<label> Tel </label>

<input type="text" name="Tel" class="champ"
id="tel" placeholder="votre num Tel" onfocus="vider_msg()"
/><br />
<label> Ville </label>

<input list="ville" class="champ" placeholder="ville " /><br />
<datalist id="ville">
<option value="Tunis"></option>
<option value="Ariana"></option>
<option value="Ben Arous"></option>
</datalist>
<hr />
<label> Mot de passe </label>
<input type="password" name="pw" class="champ" id="pw"
placeholder="Mot de passe : " onfocus="vider_msg()" /><br />
<label> Confirmer</label>
<input type="password" name="pwc" class="champ" id="pwc"
placeholder="Confirmation du Mot de passe"
onfocus="vider_msg()" /><br />
2
<div>
<input class="bout" type="submit" value="Valider" name="B1" />
<input class="bout" type="reset" value="Annuler" name="B2"
onclick="vider_msg() /> </div>
<span id="erreur" style="color: white"></span>
</fieldset>
</form>
</section>
<footer>
<p>copyrigth © bac 2022-2023 All rights reserved.</p>
</footer>

</body>
</html>
validation.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<center><p id="text_validation" >inscription effectuée avec succée</p></center>
</body>
</html>
Fichier style.css
/*pour appliquer la même police et la même taille à toute la page
* {
font-family: Arial, Helvetica, sans-serif;
3
font-size: 16px;
} */
nav {
height: 15%;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
font-weight: bold;
font-size: 25px;
border: 15px groove greenyellow;}
ul li {
display: inline;
margin: 40px;
}
li a {
text-decoration: none;
border-radius: 5px;
}
li a:hover {
background-color: rgba(17, 205, 238, 0.712);
border: 6px solid rgb(218, 45, 45);
padding: 10px;
font-size: 1.2em;
}
body {
background-image: url("plan.png");
background-size: cover;
background-repeat: no-repeat;
}
.leg {
font-family: papyrus;
font-size: 16pt;
font-weight: bold;
color: white;
padding: 10px;
background-color: rgba(219, 223, 30);
border-radius: 50%;
4
box-shadow: 5px 5px 20px black;

text-align: left;
}
.leg:hover {
text-transform: uppercase;
}
.cadre {
border: none;
background-image: linear-gradient(to top right, white, teal);
opacity: 0.9;
border-radius: 10px;
padding: 10px;
box-shadow: 10px 10px 20px white;
width: 40%;
margin: 50px auto;
text-align: center;
/* background-image: repeating-radial-gradient(red, yellow 10%, green 15%); */
}
label {
display: inline-block;
width: 150px;
font-family: cursive;
font-size: 12pt;
padding: 10px;
text-align: left;
font-weight: bold;
color: green;
}
.champ {
width: 200px;
margin-top: 10px;
border: solid 2px #aaaaaa;
padding: 10px;
font-family: verdana;
}
.champ:focus {
background-color: silver;
}
5
.bout {
width: 150px;
height: 50px;
margin: 30px auto;
border-radius: 15px;
font-size: 18pt;
}
.bout:hover {
background-color: rgb(45, 188, 231);
color: blue;
box-shadow: 10px 10px 10px rgb(186, 189, 166);
}
footer {
height: 20%;
background-color: rgba(174, 152, 99, 0.5);
background-image: linear-gradient(blue, white);
border-top: 1px solid #edf1f7;
padding-top: 5px;
display: flex;
justify-content: center;
font-size: 18pt;
font-weight: bold;
font-style: italic;
color: rgb(19, 63, 25);
}
span {
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
font-size: 20pt;
color: azure;
}
#text_validation {
font-family: papyrus;
font-size: 16pt;
font-weight: bold;
color: white;
padding: 10px;
6
background-image: linear-gradient(to bottom left, white, teal);

border-radius: 20%;
box-shadow: 5px 5px 20px black;
text-align: center;
text-transform: uppercase;}
test.js
function verif() {
var nom = document.getElementById("n").value;
var pre = document.getElementById("p").value;
var tel = document.getElementById("tel").value;
var pw = document.getElementById("pw").value;
var pwc = document.getElementById("pwc").value;
var err = document.getElementById("erreur");
//Le nom doit etre une chaine alphabétique de longueur supérieure ou égale à 3
if (nom.length < 3 || !alpha(nom)) {
//alert("nom invalide");
err.innerHTML = "Nom invalide";
err.style.backgroundColor = "red";
return false;
} //Le prénom doit etre une chaine alphabétique de longueur supérieure ou égale à 3
else if (pre.length < 3 || !alpha(pre)) {
//alert("Prénom invalide");
err.innerHTML = "Prénom invalide";
return false;
} //Le numéro de téléphone doit etre composé de 8 chiffres et ne commence pas par 0
else if (tel.length != 8 || !chif(tel) || tel[0] == 0) {
//alert("Telephone invalide");
err.innerHTML = "Telephone invalide";
return false;
} //Le mot de passe doit etre une chaine de longueur égale à 6 et ne contient pas
d'espace
else if (pw.length != 6 || pw.indexOf(" ") != -1) {
//alert("Mot de passe invalide");
err.innerHTML = "Mot de passe invalide";
return false;
7
} //La confimation du mot de passe

else if (pw != pwc) {
//alert("Confirmation Mot de passe invalide");
err.innerHTML = "Confirmation de Mot de passe invalide";
return false;
}
return true;
}
function alpha(ch) {
ch = ch.toUpperCase();
for (i = 0; i < ch.length; i++) {
if (ch[i] < "A" || ch[i] > "Z") {
return false;
}
}
return true;
}
function chif(ch) {
for (i = 0; i < ch.length; i++) {
if (ch[i] < "0" || ch[i] > "9") {
return false;
}
}
return true;
}
function vider_msg() {
document.getElementById("erreur").innerHTML = "";
}

Code Complet Projet2

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Code Complet Projet2

Transféré par

Droits d'auteur :

Formats disponibles

Matière : STI Prof : Mme Asma Briki

Domaine d’apprentissage : Systèmes & technologies de l’informatique

Partie I : Création d’un site web statique

Classe : 4ème SI1/2 Lycée Hmida Bakir Mnihla

<input type="text" name="prenom" class="champ" id="p"

<label> Tel </label>

<label> Ville </label>

box-shadow: 5px 5px 20px black;

background-image: linear-gradient(to bottom left, white, teal);

} //La confimation du mot de passe

Vous aimerez peut-être aussi