LYCEE RAFEHA ISSAOUI AMEL TP 5 3SI(STI)
Important :
Dans le dossier "WWW", créer un répertoire nommé "SW_Nom_&_Prénom", où seront enregistrés tous les fichiers
demandés.
Création des documents Web
Consignes
Toutes les fonctions JavaScript doivent être enregistrées dans un fichier nommé "[Link]".
Toutes les règles CSS définissant des styles de mise en forme doivent être enregistrées dans le
fichier "[Link]".
Votre page HTML à créer doivent être attachée au fichier "[Link]".
Le clic sur le bouton "Annuler" permet d’initialiser les champs
1) Créer la page " [Link] " qui permet d’ajouter une nouvelle inscription via le formulaire suivant :
Type :Text
Type Date
1
LYCEE RAFEHA ISSAOUI AMEL TP 5 3SI(STI)
HTML
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="[Link]" />
<title> Inscription Universitaire </title> </head>
<body>
<form action="[Link]" method="post" onsubmit="return false">
<fieldset>
<legend>Portail Inscription Universitaire</legend>
<label for="">Nom et Prénom :</label><input type="text" name="np" id="np"/><br/>
<label for="">E_mail :</label><input type="text" name="mail" id="mail" /><br />
<label for="">Moyenne :</label> <input type="text" name="moy" id="moy" /><br />
<label for="">Session :</label>
<input type="radio" name="r" id="r1" value="P" />Principale
<input type="radio" name="r" id="r2" value="C" />Contrôle<br />
<label for="">Faculté :</label>
<input list="lst" name="faculte" id="faculte" />
<datalist id="lst">
<option value="Choisir une faculté"></option>
<option value="ENIT"></option>
<option value="ENSI"></option>
<option value="INSAT"></option>
<option value="ESC"></option>
<option value="CAMPUS"></option></datalist><br />
<label for="">Date de Naissance:</label><input type="text" name="dtn" id="dtn"/><br/>
<label for="">Date d'Inscription :</label><input type="text" name="dti" id="dti"/>
<br/>
<label for=""></label>
<input type="submit" value="Valider" onclick="return verif()" />
<input type="reset" value="Annuler" />
</fieldset> </form>
<script src="[Link]"></script>
</body> </html>
CSS
label {
display: inline-block;
width: 200px;
padding: 10px;
font-weight: bold;
}
2
LYCEE RAFEHA ISSAOUI AMEL TP 5 3SI(STI)
NB. Le champ Faculte est de type datalist
<input list="lst" name="faculte" id="faculte">
<datalist id="lst">
<option value="Choisir une faculté"></option>
<option value="ENIT"></option>
<option value="ENSI"></option>
<option value="INSAT"></option>s
<option value="ESC"></option>
<option value="CAMPUS"></option>
</datalist>
1. Les attributs "value" des boutons radio (Principale, Contrôle) relatifs à la session ont respectivement les valeurs "P",
"C".
HTML
<label for="">Session :</label>
<input type="radio" name="r" id="r1" value="P" />Principale
<input type="radio" name="r" id="r2" value="C" />Contrôle<br />
2. Le clic sur le bouton "Valider" fait appel à : Une fonction JavaScript nommée verif
3. Ajouter les règles de style CSS afin d’appliquer les mises en forme suivantes,
CSS
Toutes les zones de saisie: input[type="text"] {
Couleur d’arrière-plan : noir background-color: black;
color: beige;
Couleur de police : beige
}
la légende : legend {
Une Transition qui se déclenche au survol de la text-align: center;
souris permettant d’agrandir les dimensions de
font-size: 30px;
transition: all 2s linear;
la légende en utilisant la règle CSS « scale(x,y) »
}
legend:hover { transform: scale(10,10); }
4. Développer, dans le fichier "[Link]", la fonction "verif" afin de s’assurer de la validité des champs du formulaire
tout en respectant les contrôles suivants :
JS
Le Nom_Prénom est une let np = [Link]("np").[Link]();
chaine alphabétique de taille let ok = alpha(np) && [Link] >= 3;
min 3 lettres.
if (!ok) {
alert("nom et prénom est invalide");
return ok;
}
3
LYCEE RAFEHA ISSAOUI AMEL TP 5 3SI(STI)
E_mail est une chaine qui m = [Link]("mail").[Link]();
respecte le format suivant : ch1 = [Link](0, [Link]("@"));
ch1@ch2.ch3 avec ch2 = [Link]([Link]("@") + 1, [Link]("."));
ch3 = [Link]([Link](".") + 1);
Ch1 est une chaine
ok = [Link]("@") >= 0 &&
alphanumérique non vide [Link](".") > [Link]("@")&&
Ch2 est une chaine alphan(ch1) && alpha(ch2) && alpha(ch3) &&
alphabétique non vide [Link] >= 2 &&
[Link] <= 20;
Ch3 est une chaine
alphabétique non vide de if (!ok) {
deux ou trois caractères alert("email invalide");
return ok;
}
Moyenne un réel entre 0 et 20 let moy = [Link]("moy").value;
ok = Number(moy) === parseFloat(moy) &&
parseFloat(moy) >= 0 &&
parseFloat(moy) <= 20;
if (!ok) {
alert("moyenne invalide");
return ok;
}
Sélection obligatoire d’une let session = [Link]("r");
session ok = session[0].checked || session[1].checked;
if (!ok) {
alert("session obligatoire");
return ok;
}
Saisie obligatoire d’une faculté Let f = [Link]("faculte").[Link]();
existante dans la liste tab = ["ENIT", "ENSI", "INSAT", "ESC", "CAMPUS"];
ok = [Link](f) >= 0;
if (!ok) {
alert("faculte invalide");
return ok;
}
Fonction alpha function alpha(ch) {
for (let i = 0; i < [Link]; i++) {
if (ch[i]<"a"||ch[i]>"z") { return false;}
}
return true;
}
Fonction alphan function alphan(ch) {
for (let i = 0; i < [Link]; i++) {
if (ch[i]<"a"||ch[i]>"z") {if(ch[i]<"0"||ch[i]>"9"){return false;} }
}
return true;
}