Site Web Statique Formateur : HAIJ Oussama
TP 2 : Formulaires
Exercice 1 :
Le but de cet exercice est de rédiger le code d’une page nommée VotreNom-
[Link].
Il est rappelé que l’affichage de certains champs du formulaire peut légèrement différer
selon le navigateur utilisé.
Dans cet exercice, il n’est demandé ni d’utiliser CSS, ni d’utiliser JavaScript.
• Question 1 : Créer l’en-tête HTML, le titre (avec une balise h1) et la phrase de bas de
page.
• Question 2 : Créer le formulaire avec la balise <form>. La cible (action) du formulaire
sera [Link]. Mettre en place le pourtour du formulaire à l’aide de la balise
<fieldset> ; le texte en haut à gauche du cadre s’obtient grâce à la balise <legend>.
• Question 3 : Ajouter les champs noms et prénoms (type text).
• Question 4 : Ajouter le champ date de naissance (type date).
• Question 5 : Ajouter le champ lieu de naissance (type radio) ; les balises nécessaires
seront entourées de balises fieldset afin d’obtenir l’aspect visuel du cadre (le texte
Lieu de naissance s’obtient grâce à la balise <legend>). Attention : il faut que le choix
soit exclusif, c’est-à-dire qu’on ne puisse pas sélectionner les deux boutons
simultanément : pour cela, il faut que les différents boutons aient le même name
(mais un id différent).
• Question 6 : Ajouter le champ adresse postale (balise textarea). La zone de texte fait
2 lignes et 30 colonnes. La syntaxe de textarea est la suivante : <textarea id="..."
rows="..." cols="..." placeholder="..."></textarea>
• Question 7 : Ajouter le champ code postal (type number).
• Question 8 : Ajouter les champs adresse électronique et page personnelle (type
email et url).
• Question 9 : Ajouter le champ téléphone portable (type text).
• Question 10 : Ajouter le champ semestre (balises select). La liste déroulante devra
contenir les valeurs S1, S2, S3 et S4. Pour chacune des valeurs, il faut mettre u champ
value (qui peut être identique à la valeur affichée).
Site Web Statique Formateur : HAIJ Oussama
• Question 11 : Ajouter le champ « niveau en HTML » (type range). La barre devra aller
de 0 (min="0") à 10 (max="10") avec des pas d’incrément de taille 1 (step="1").
• Question 12 : Ajouter le champ connaissances (type checkbox) ; les balises
nécessaires seront entourées de balises fieldset afin d’obtenir l’aspect visuel du
cadre. Il faut que les différentes cases aient le même name (mais pas le même name
que les deux boutons plus hauts !).
• Question 13 : Ajouter le bouton « Envoyer » (balise button avec type submit).
Exercice 2 : (complémentaire) : Améliorations et vérifications
Dans cet exercice, nous allons améliorer le fichier [Link].
• Question 1 : Modifier votre formulaire pour que le semestre sélectionné par défaut
soit S2.
• Question 2 : Modifier votre formulaire pour que seule la case « HTML » soit cochée
par défaut.
• Question 3 : Modifier votre formulaire pour que le code postal ne puisse avoir que 5
chiffres au maximum.
• Question 4 : Modifier votre formulaire pour que le numéro de téléphone portable
soit un numéro de téléphone français valide (10 chiffres commençant par un 06 ou
07).
• Question 5 : Ajouter un bouton qui, lorsque l’on clique dessus, réinitialise tous les
champs du formulaire à leur valeur par défaut
Site Web Statique Formateur : HAIJ Oussama
Figure 1 : Formulaire réalisé dans le cadre du TP 2
