TP N°3 : Systèmes, technologies et Internet 4 SI

HTML5 CSS3 JS

1. Lancer l’éditeur « VSCode » et le logiciel « Dreamweaver21 »

2. Créer une nouvelle page web intitulée « TP1_JS.html » et un fichier « test.js » et les
enregistrer dans votre dossier de travail sous le lecteur C:\

3. Créer le formulaire suivant :

4. Ecrire un script qui permet d’afficher un message de Bienvenue quand l’utilisateur

clique sur le bouton « Valider ».

5. Ajouter un contrôle pour vérifier que l’utilisateur a renseigné son nom et son prénom.
a. En utilisant la méthode « prompt »
b. En utilisant un formulaire comme il est indiqué ci-dessous.
6. Modifier le code afin d’afficher le nom et prénom dans un div avec le format Gras et
couleur Verte.

7. Ajouter un champ check box qui permet à l’utilisateur d’accepter les conditions
générales de vente. Un message d’erreur est affiché si cette option n’est pas cochée

Prof : Mme S.Z Amel 1/4

TP N°3 : Systèmes, technologies et Internet 4 SI

HTML5 CSS3 JS
8. Ajouter un champ de type select appelé "Profession" avec les valeurs suivantes :
Etudiant, Enseignant, Ingénieur, Autre

9. Ajouter un champ de type select appelé « Section » avec les valeurs suivantes :
Informatique, Technique, Mathématique, Lettres, E&G, Sport.

10. Modifier le code JavaScript afin de n’afficher le champ « Section » que si l’utilisateur
choisit la profession « Etudiant ».

N.B : La profession par défaut est enseignant, donc il faut cacher la section dès le
chargement de la page.

11. Ajouter un attribut « Genre » et modifier le texte de bienvenue en ajouter Mr ou

Mme selon la valeur choisie.

12. Ajouter un champ de type check box appelé « Formations souhaitées » qui permet
à l’utilisateur de choisir au moins une formation à assister.

Prof : Mme S.Z Amel 2/4

TP N°3 : Systèmes, technologies et Internet 4 SI

HTML5 CSS3 JS

13. Ajouter un contrôle JavaScript pour que l’utilisateur choisit au moins une
formation et au plus 3.

14. Ajouter un champ texte « Téléphone » après le « Prénom » qui doit être une chaine
de 8 chiffres dont le premier est différent de 0, 1 et 6.

15. Ajouter un champ texte « Email » après le téléphone. Il doit contenir le symbole @
une seule fois.

16. Ajouter les évènements JavaScript nécessaires sur les inputs de type texte :

a. Lors de saisie, colorier le background en gris (code = #eeeeee)

b. En sortant, enlever cette mise en forme

Prof : Mme S.Z Amel 3/4

TP N°3 : Systèmes, technologies et Internet 4 SI

HTML5 CSS3 JS

En cas où l’utilisateur a effectué une erreur ce message sera affiché :

17. Ajouter un div ayant l’id « welcome » au-dessus du formulaire. On souhaite afficher
la date du jour dans ce div dès le chargement de la page.

Prof : Mme S.Z Amel 4/4