TP Formulaire Modif
TP Formulaire Modif
TP Formulaire Modif
Compétences Visées :
S4.7. Langage de programmation :
- Web statique : HTML
- Web dynamique : JavaScript
I. EXECUTION ET COMPREHENSION
Soit le fichier html suivant :
<!DOCTYPE HTML">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Exemple</title>
</head>
<body>
<hr>
<div id="bloc">
<form name ="myForm" onsubmit="return validateForm()"
method="post">
<p>
Civilité <select id="select" name ="fcivilite">
<option value="">Votre civilité</option>
<option value="Monsieur">M.</option>
<option value="Madame" selected>Mme</option>
<option value="Mademoiselle">Mlle</option>
</select><br>
1
code postale :<input type="text" id="postale" name ="fpostale"><br>
Numéro Un nombre
Rue Chaîne alphanumérique
Code postal Cinq chiffres
Ville Chaîne de caractères.
Remarque :
R1. Une bonne manière de procéder serait de modifier le code du point I.
R2. Signalons que nous aurons besoin des notions de tableau. C'est-à-dire, c’est dans un
tableau que nous créerons notre formulaire d’inscription.
RESULTAT :
L’affichage se fera en utilisant un navigateur (Browser) de votre choix. En utilisant chrome,
l’affichage se fait de la manière suivante :
2
PENSEZ A COMMENTER VOTRE CODE. CELA VOUS PERMETTRA
DE COMPRENDRE L’UTILISATION DE CHAQUE BALISE.
Ressource :
https://www.w3schools.com/html/html_forms.asp : pour le formulaire
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_table_border : pour
le tableau
III. INTEGRATION DU CODE JAVASCRIPT ET VERIFICATION DE
CHAMPS
Soit le fichier fonction.js qui suit :
function validateForm( ) {
var a = document.forms["myForm"]["fcivilite"].value;
var b = document.forms["myForm"]["fname"].value;
var c = document.forms["myForm"]["fprename"].value;
var d = document.forms["myForm"]["fadresse"].value;
var e = document.forms["myForm"]["fville"].value;
var f = document.forms["myForm"]["fpostale"].value;
var g = document.forms["myForm"]["fcouriel"].value;
if (a == "") {
alert("Entrez votre civilite");
if (b == "") {
alert("Entrez votre nom");
if (c == "") {
alert("Entrez votre prenom");
3
if (d == "") {
alert("Entrez votre adresse");
if (e == "") {
alert("Entrez votre ville");
if (f == "") {
alert("Entrez votre code postale");
if (g == "") {
alert("Entrez votre couriel");
return false;
}
}
Travail demandé :
Reprendre notre fichier "inscription.html", nous souhaitons intégrer l’interactivité en utilisant les
scripts JavaScript. Inspirez-vous du script fonction.js. Les champs à vérifier sont : le Nom, le
Prénom, le Numéro, la Rue, le Code Postal, la Ville, le Téléphone et E-mail.
if ((l<5) || (l>5)){
document.form.output.value ="code non valide";
return false;
}
if (isNaN(document.form.input.value) == true){
document.form.output.value ="Pas de lettres !";
}
4
if (l == 5){
document.form.output.value ="code valide";
return false;
}
}
</script>
<body>
<form name ="form" action=" ">
code postal : <input type="text" name = "input" size ="10" onfocus="annuler()">
<input type="button" value="verifier" onclick="verif()"> <br>
<input type="text" name ="output" size="38">
</form>
<body>
</html>
Le fichier permet de vérifier si nous avons entré 5 chiffres dans la ligne de texte code Postal
Travail demandé :
Reprendre votre fichier inscription.html, il vous est demandé d’intégrer la vérification de la ligne de
texte code postal.
Le test porte sur la présence de 5 caractères (pas plus, pas moins), et ces caractères ne peuvent pas
être des lettres.