L2SI Développement Web
TP/TD Les formulaires(2)
(Série extraite à partir des Examens déjà proposés)
Exercice 1
Le but de cet exercice est de calculer le total à payer par un client. Pour cela, on pourra se servir du
formulaire HTML suivant :
N.B. :
- velo, rollers et ballon_foot sont des cases à cocher ayant les valeurs respectivement 100, 50 et 10.
- payement est une liste ayant deux options. Le texte initialement affiché est E-dinar ayant la valeur
0. Le texte associé à la deuxième option est carte Visa ayant la valeur 1.
Voici la liste des fonctions à développer en javascript :
Noms des fonctions Indications
affTemps() Affecte le mois et l’année relatifs à la date système dans les
champs mois et annee.
affMt() Calcule le montant des jouets sélectionnés et l’affiche dans
le champ montant.
affCarte() Rend le champ code carte activé une fois l’option carte
visa est choisie à partir de la liste. Et le rend désactivé une
fois l’option E-dinar est choisie.
Travail demandé :
Ecrire les codes HTML et javascript correspondant tout en tenant compte des éléments suivants :
- Au moment du chargement de la page, il faut appeler la fonction affTemps().
- Le clic sur les cases à cocher appelle la fonction affMt() pour afficher le total à payer dans le
champ montant.
- Le choix de l’une des deux options de la liste fait appel à la fonction affCarte().
Page 1 sur 4
L2SI Développement Web
Exercice 2
Soit le formulaire suivant :
1. Ecrivez les codes HTML et javascript correspondants au formulaire ci-dessus tout en développant
les fonctions JavaScript suivantes :
AfficheEtoile() : Une fois une catégorie est cochée, le deuxième champ texte affichera le
nombre d’étoiles correspondantes.
VerifNom() : Nom hôtel est obligatoire et ne contenant que des caractères alphabétiques ma-
juscules.
VerifChaine() : Si catégorie est égale à 3 et chaîne Abou Nawas afficher un message d’er-
reur. Sachant que la liste Chaîne contient Al Mouradi et Abou Nawas.
VerifTel() : Tel doit être numérique.
VerifSite() : Site web doit commencer par « www. ».
Exercice 3
Le but de cet exercice est de calculer le total à payer par un client dans un restaurant. Pour
cela, on pourra se servir du formulaire HTML suivant :
Il s’agit alors de choisir le menu parmi les valeurs de la liste suivante :
Menu (texte) Prix (valeur)
Aucun 0
Salade 6,500
Couscous 14,500
Dessert 3,500 Page 2 sur 4
L2SI Développement Web
Les champs du formulaire sont :
Noms de champs Indications Types
Temps Champ qui va afficher le temps Champ texte en lecture seule.
système.
Menu La valeur initialement affichée est Champ liste.
Aucun.
La valeur associée à chaque option
est égale à son prix.
Qte La valeur par défaut = 0. Champ texte à saisir.
Total La valeur par défaut = 0. Champ texte calculable en
lecture seule.
Adresse Champ initialement inactif. Champ texte multi-lignes.
Commande à domicile Champ initialement non coché Case à cocher
Liste des fonctions à développer en javascript :
Noms des fonctions Indications Barème
afficherTemps() Affecte le temps système sous le format HH : mm : ss dans 1 point
le champ temps.
Calculer() Calcule le total à payer comme suit : 2 points
- Si menu est aucun ou qte=0, alors total=0.
- Sinon total=valeur du menu choisi * qte
activerAdresse() Teste si la case "Commande à domicile": 1 point
- est sélectionnée, dans ce cas, il faut alors activer le
champ adresse.
- n’est pas sélectionnée, il faut alors vider le champ
adresse puis le désactiver.
On vous demande d’écrire les codes HTML et javascript correspondants tout en tenant compte des
éléments suivants :
- Au moment du chargement de la page, il faut afficher le temps système dans le champ temps en
appelant la fonction afficherTemps().
- Choisir le menu désiré parmi la liste présentée.
- Saisir la quantité demandée.
- Le Click sur le bouton "Calculer total" appelle la fonction calculer( ) pour afficher le total à
payer dans le champ total.
- Cliquer éventuellement (en cas de livraison à domicile) sur la case à cocher "commande à domi-
cile" et appeler la fonction activerAdresse() pour pouvoir saisir l’adresse.
Exercice 4 :
Il s’agit de mettre en place un module de maintenance qui permet aux utilisateurs de l’entreprise de
gérer le suivi des interventions techniques sur ses équipements. Pour cela, on pourra se servir du
formulaire HTML suivant :
Page 3 sur 4
L2SI Développement Web
Voici la liste des fonctions à développer en JavaScript :
Noms des fonctions Indications
DesacInt() Rend le champ « Nom Intervenant Externe » activé une fois la
valeur « Intervenant externe » est choisie à partir de la liste. Et le
rend désactivé une fois une autre valeur est choisie.
Voici la liste des intervenants :
affDate() Appelée lors du chargement de la page, permet d’afficher le mois en
toutes lettres et en français relative à la date système dans le champ
mois. Ainsi que l’année dans le champ correspondant.
AffCode() Affecte la valeur d’un code dans le champ «Code» lorsque le champ
«Description de l’intervention» est rempli.
La valeur d’un code doit commencer par X suivi du premier mot écrit
dans la description de l’intervention si cette dernière contient dans
son texte « danger ». Si non le code aura la valeur « Int RAS ».
CalCout() Affecte la valeur du coût de l’intervention dans le champ « Coût »
selon le type d’urgence choisi, à savoir 100 pour situation critique, 50
pour situation semi urgente et 10 pour situation ordinaire.
Travail à faire : Ecrire les code HTML et JavaScript pour réaliser ce module tout en tenant
compte des fonctions énoncées ci-dessus.
Page 4 sur 4
