TP 2

Formulaires

E X E R C I C E
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
 Programmation Web L3

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 balises <fieldset> et </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 second groupe de boutons radio « Option NSI au bac ». Encore une
fois, il faut que le choix soit exclusif entre ces deux boutons (c’est-à-dire qu’on ne puisse pas
sélectionner les deux boutons simultanément) ; il faut aussi que les deux groupes de boutons
radio soient indépendants (on doit pouvoir sélectionner une valeur de lieu de naissance et
une valeur pour l’option NSI au bac).

Question 7 : Ajouter le champ adresse postale (balise textarea). La taille de cette zone
de texte est de 2 lignes (hauteur) et 30 colonnes (largeur). Rappel : la syntaxe de textarea est
la suivante :
1 < textarea id = " ... " rows = " ... " cols = " ... " placeholder = " ... " > </ textarea >

Question 8 : Ajouter le champ code postal (type text).

Question 9 : Ajouter les champs adresse électronique et page personnelle (types email
et url).

Question 10 : Ajouter le champ téléphone portable (type text).

Question 11 : 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 12 : Ajouter le champ « niveau en HTML » (type range). La barre devra aller de 0
à 10 avec des pas d’incrément de 1.

Question 13 : Ajouter le champ connaissances (type checkbox) ; les balises nécessaires

seront entourées de balises <fieldset> et </fieldset> afin d’obtenir l’aspect visuel du
cadre.

Question 14 : Ajouter le bouton « Envoyer » (balise button avec type submit).

■

2/5
 Programmation Web L3

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.

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 français valide (10 chiffres commençant par 06 ou 07). En cas d’erreur,
le navigateur doit afficher un message contenant « Numéro à 10 chiffres sans espace et com-
mençant par 06 ou 07 ». (L’erreur doit s’afficher lorsque l’on clique sur le bouton « Envoyer ».)

Faire valider par votre enseignant·e

■

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 (entre les balises <head> et </head>) une balise :
1 < link rel = " stylesheet " type = " text / css " media = " screen "
href = " formulaire . css " >

3/5
Programmation Web L3

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 :

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 2 em, son alignement est centré (attribut text-align), et la barre infé-
rieure est de couleur #213857 de largeur 10 pixels. Attribut utile : border-bottom.

Question 5 : Modifier la feuille de style afin que la couleur de fond du formulaire soit une
variante de marron clair (#d9d4bd) et que l’espace (padding) entre le contenu du formulaire
et ce cadre principal soit de 50 pixels. Le padding ne doit pas s’appliquer aux sous-cadres
(« Lieu de naissance », « Option NSI au bac » 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.

4/5
Programmation Web L3

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 de couleur #213857 et d’une largeur de
5 pixels, le texte est centré, et la taille du texte est x-small. Le fond du pied de page est dans
une couleur de variante de bleu clair (#e9f3f6).

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
ê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 un tur-

quoise foncé (#466e92), celle du fond est une variante de marron (#cac2a5).
Indice : modifier exceptionnellement le code HTML en ajoutant un id dans le bon
fieldset, et s’y référer depuis le code CSS.

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.

Faire valider par votre enseignant·e

Question (optionnelle) 12 : S’il n’avait pas été possible de modifier le code HTML, com-
ment aurait-on pu réaliser les deux questions précédentes ?
Indice : le cadre « Connaissances » est le 3e fieldset à l’intérieur d’un fieldset dans le
formulaire (form). Indice : pour compter en CSS, utiliser :nth-of-type.
■

Version du TP : 1er février 2024

5/5