TP1 –HTML-CSS3-JavaScript 2014

Exercice 1 :

Pour s’inscrire dans un forum, un utilisateur doit remplir le formulaire suivant :

1. Ecrire le code HTML pour créer le formulaire

2. Ecrire le code permettant de respecter les règles :

a. Tous les champs sont obligatoires

b. La date de naissance doit être valide (01<=jour<=31, 01<=mois<=12 et année>=1900)

c. Le champ mot de passe et le champ confirmer mot de passe doivent être égaux

d. Si la case « J’accepte les conditions » n’est pas cochée, le bouton valider est

désactivé.

Exercice 2 :

1) Réalisez en HTML le formulaire suivant :

TP1 –HTML-CSS3-JavaScript 2014

2) Ecrire un script qui effectue les vérifications suivantes :

a. Tous les champs doivent être renseignés

b. Le nom doit être composé uniquement de lettres alphabétiques

c. Le montant des frais de participation doit être supérieur ou égal à 500.

Exercice 3 :

Ecrire une page HTML contenant :

Un titre h1.

Un titre h2.

Faire en sorte que le titre h2 effectue une série de 20 rotations.

Les rotations ne commenceront que 5 secondes après le chargement de la page.

Exercice 4 :

Ecrire une page HTML contenant :

Un titre h1.

Un titre h2.

Faire en sorte que le titre h1 effectue une rotation avec zoom lors du survol par le

curseur de la souris.

Exercice 5 :

Construire un document HTML et un document CSS produisant l’affichage ci-dessous, le

fichier HTML ne devra contenir aucun attribut de balise et ne devra utiliser que les balises

h1, p et div

TP1 –HTML-CSS3-JavaScript 2014

Exercice 6 :

a. Créer un menu horizontal en html5 et css3. b. Faire en sorte que les éléments de ce menu effectuent un zoom et un changement de

couleur d’arrière-plan lors du survol du pointeur sur cet élément.

Exercice 7 :

Créez un formulaire divisé en trois groupes. Le premier groupe permet d’obtenir les

coordonnées du visiteur. Il contient trois zones de texte pour la saisie du nom, du prénom et

de l’e-mail et une zone de mot de passe. Ces champs sont suivis d’un groupe de boutons

radio pour indiquer le sexe de la personne. Enfin, ce groupe se termine par une liste de

sélection qui contient trois groupes d’options pour le choix du pays.

Le deuxième groupe permet de saisir des informations sur les goûts du visiteur. Il comprend

trois cases à cocher et une zone de texte multi lignes de 50 caractères de large et de 5

lignes de haut.

Le troisième groupe contient un composant d’envoi de fichier et un champ caché indiquant la

taille maximale des fichiers, fixée à 10 Ko. Le formulaire se termine bien évidemment par

l’insertion des boutons d’envoi et de réinitialisation.

TP1 –HTML-CSS3-JavaScript 2014