TP 2
Formulaires
E X E R C I
Exercice 2.1 (Un formulaire intégralement en HTML). Le but de cet exercice est de rédiger le
code HTML d’une page nommée formulaire.html, et qui devra à la fin de cet exercice avoir
l’apparence de la page ci-dessous :
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 JavaScript.
Question 1 : Créer l’en-tête HTML, le titre (avec une balise h1) et la phrase de bas de page
(avec une balise footer).
1
Question 2 : Créer le formulaire avec la balise <form>. La cible (action) du formu-
laire sera destination.html. 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 nom et prénom (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.
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 :
1 < textarea id = " ... " rows = " ... " cols = " ... " placeholder = " ... " > </ textarea >
Question 7 : Ajouter le champ code postal (type text).
Question 8 : Ajouter les champs adresse électronique et page personnelle (types 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, S4, S5 et S6. Pour chacune des valeurs, il faut mettre un champ
value (qui peut être identique à la valeur affichée).
Question 11 : Ajouter le champ « niveau en HTML » (type range). La barre devra aller de 0
à 10 avec des pas d’incrément de 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.
Question 13 : Ajouter le bouton « Envoyer » (balise button avec type submit).
E X E R C I C E
Exercice 2.2 (Améliorations et vérifications). Dans cet exercice, nous allons améliorer le for-
mulaire, et notamment effectuer des vérifications basiques. Ces vérifications seront effec-
tuées uniquement en HTML, sans l’usage de JavaScript.
Question 1 : Ajouter un bouton qui, lorsque l’on clique dessus, réinitialise tous les
champs du formulaire à leur valeur par défaut.
2/5
Question 2 : Modifier votre formulaire pour que le semestre sélectionné par défaut
soit S6. Voir la documentation de l’attribut selected.
Question 3 : Modifier votre formulaire pour que seule la case « HTML » soit cochée par
défaut. Voir la documentation de l’attribut checked.
Question 4 : Modifier votre formulaire pour que le niveau en HTML par défaut soit de 8.
Question 5 : Modifier votre formulaire pour que la date de naissance par défaut soit le 1er
janvier 2000.
Question 6 : Modifier votre formulaire pour qu’il soit obligatoire de remplir le champ nom
pour pouvoir envoyer le formulaire.
Question 7 : Modifier votre formulaire pour que le code postal ne puisse avoir que exacte-
ment 5 chiffres (ce qui sera donc à la fois un minimum et un maximum). Les autres caractères
(lettres. . .) ne doivent pas être acceptés. En cas d’erreur, le navigateur doit afficher un mes-
sage contenant « Code postal à 5 chiffres attendu ». (L’erreur doit s’afficher lorsque l’on clique
sur le bouton « Envoyer ».) Attributs utiles : title, pattern, placeholder.
Question 8 : Modifier votre formulaire pour que le numéro de téléphone portable soit un
numéro de téléphone du pays valide (9 chiffres commençant par 69 ou 67). En cas d’erreur, le
navigateur doit afficher un message contenant « Numéro à 10 chiffres sans espace et com-
mençant par 69 ou 67 ». (L’erreur doit s’afficher lorsque l’on clique sur le bouton « Envoyer ».)
E X E R C I C E
Exercice 2.3 (Ajout d’une feuille de style).
Question 1 : Créer une feuille de style CSS vierge formulaire.css.
Question 2 : Ajouter à formulaire.html un lien vers la feuille de style, en ajoutant dans
l’en-tête HTML (<head>) une balise :
1 < link rel = " stylesheet " ... >
Dans la suite de l’exercice, il conviendra de remplir la feuille de style formulaire.css de
façon à obtenir à la fin de cet exercice l’apparence de la page ci-dessous :
3/5
Aucune modification du fichier formulaire.html n’est autorisée. Toutes les modifica-
tions se feront dans le fichier CSS.
Question 3 : Modifier la feuille de style afin que toute la page (sélecteur body) soit par
défaut en linéale, c’est-à-dire en police sans-serif (attribut font-family).
Question 4 : Mettre en forme le titre (sélecteur h1) comme suit : la marge supérieure
(margin-top) est de 2em, son alignement est centré (attribut text-align), et la barre infé-
rieure est noire de largeur 10 pixels. Attribut utile : border-bottom.
Question 5 : Modifier la feuille de style afin que la couleur de fond soit #F0FFF0 et que
l’espace (padding) entre le contenu du formulaire et ce cadre principal soit de 50 pixels. Ceci
ne doit pas s’appliquer aux deux sous-cadres « Lieu de naissance » et « Connaissances ». Il
convient donc de trouver le bon sélecteur CSS pour ne sélectionner que le cadre principal.
Question 6 : Modifier la feuille de style afin que les légendes de cadres (sélecteur legend)
s’affichent en majuscules.
Question 7 : Mettre en forme la phrase en bas de page, comme suit : cette phrase est
séparée de ce qui précède (attribut margin-top) d’un espace de 2em, les barres supérieure
(border-top) et inférieure (border-bottom) sont bleues et d’une largeur de 5 pixels, le texte
est centré, et la taille du texte est x-small.
Question 8 : Modifier la feuille de style afin que les étiquettes (sélecteur label) concer-
nées s’affichent en gras. Seules les étiquettes directement dans le fieldset principal doivent
4/5
être en gras, et non celles dans les sous-fieldset.
Question 9 : Modifier la feuille de style afin que les étiquettes soient toutes alignées à
gauche, et que les champs s’affichent tous alignés à une distance de 250 pixels de la partie
gauche de l’étiquette. On utilisera une solution qui ajoutera à un sélecteur d’étiquette (label)
une largeur de 250 pixels ainsi que les propriétés display: block; et float: left;.
Question 10 : Mettre en forme le cadre connaissances : la couleur du texte est bleue,
celle du fond est #F0F0FF. La difficulté ici est de trouver le bon sélecteur CSS (rappel : la
modification du code HTML, et donc l’ajout d’un id, est interdite !).
Indice : il s’agit du 2e fieldset dans un fieldset dans le formulaire (form). Pour comp-
ter en CSS, utiliser :nth-of-type.
Question 11 : Modifier les labels du cadre connaissances (et seulement de celui-ci) afin
qu’un label sur deux s’affiche en italique.
Indice : il faudra utiliser even (« pair ») quelque part.
5/5
