TP Formulaire Modif

TP Formulaire 2017-2018
TRAVAUX PRATIQUES SERVEUR WEB : FORMULAIRE ET

JAVASCRIPT
Pré-requis :
Maitriser le HTML basique
Connaissance sur l’éditeur de texte
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>
nom :<input type="text" id="nom" name ="fname" ><br>
prenom :<input type="text" id="prenom" name ="fprename" ><br>
adresse :<input type="text" id="adresse" name ="fadresse"><br>
ville :<input type="text" id="ville" name ="fville"><br>
1
code postale :<input type="text" id="postale" name ="fpostale"><br>
<input type="radio" name="subscribe" value="subscribe to newslettre"> je

souhaite recevoir la newslettre<br>
couriel :<input type="text" id="couriel" name ="fcouriel"><br>
<input type="submit" value="Envoyer">

<input type="reset" value="Réinitialiser">
</p>
</form>
<hr>
</body>
</html>
On vous demande d’exécuter le code précédent et d’en saisir la bonne compréhension de

chacune de balise. Nommer le fichier "exempleformulaire.html"
Ressource pour la compréhension des balises input et ses attributs:
https://www.w3schools.com/html/html_forms.asp
II. Travail demandé :

A partir du code précédent, il vous est demandé de créer dans la page "inscription.html" un
formulaire d’inscription d’un internaute à une newsletter.
Les informations qui doivent être saisies sont les suivantes :
Civilité {Mme., Mlle., M.}
Nom Chaîne de caractères alphabétiques.
Prénom Chaîne de caractères alphabétiques.
Date de naissance jj/mm/aaaa
Adresse Une adresse (voir ci-après)
Téléphone 8 chiffres
Adresse e-mail Nom.prenom@domain.tld
Une adresse est composée des champs suivants :
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;
}
}
Reprendre le fichier "exempleformulaire.html", on vous demande d’intégrer le script

JavaScript soit en utilisant un lien externe, soit en utilisant un lien interne.
Vous devez l’exécuter et le comprendre
Résultat : Ce script permet de vérifier les champs vides d’un formulaire.
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.
IV. Validation du champs code Postal

Soit le fichier HTML nommé "code.html" suivant :
<!DOCTYPE html>
<html>
<head>
<title> Travaux pratiques </title>
<meta http-equiv="Content-type" content="text/html; charset= UTF-8">
<script type="text/javascript">
function verif(){
var l = document.form.input.value.length
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.
Remarque : Pour se faire, inspirez-vous du script précédent.
V. Question Bonus : Formulaire d’inscription

Ayant compris le concept des questions précédentes, vous allez réaliser le formulaire ci-dessous :
Question : Écrire le code HTML produisant ce formulaire

TP Formulaire Modif

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

TP Formulaire Modif

Загружено:

Авторское право:

Доступные форматы

TP Formulaire 2017-2018

TRAVAUX PRATIQUES SERVEUR WEB : FORMULAIRE ET

nom :<input type="text" id="nom" name ="fname" ><br>

prenom :<input type="text" id="prenom" name ="fprename" ><br>

adresse :<input type="text" id="adresse" name ="fadresse"><br>

ville :<input type="text" id="ville" name ="fville"><br>

<input type="radio" name="subscribe" value="subscribe to newslettre"> je

couriel :<input type="text" id="couriel" name ="fcouriel"><br>

<input type="submit" value="Envoyer">

On vous demande d’exécuter le code précédent et d’en saisir la bonne compréhension de

II. Travail demandé :

Une adresse est composée des champs suivants :

Reprendre le fichier "exempleformulaire.html", on vous demande d’intégrer le script

Résultat : Ce script permet de vérifier les champs vides d’un formulaire.

IV. Validation du champs code Postal

Remarque : Pour se faire, inspirez-vous du script précédent.

V. Question Bonus : Formulaire d’inscription

Question : Écrire le code HTML produisant ce formulaire

Вам также может понравиться