TP 3 : Formulaire d’une page web
Une page web écrite proprement et en fait constituée de deux fichiers :
• Un fichier HTML qui va s’occuper du contenu brut de la page web
• Un fichier CSS qui va s’occuper de la décoration de la page web
Objectifs :
Le but de cet exercice est de rédiger le code d’une page nommée VotreNom-
formulaire.html, et qui doit avoir l’apparence de la page correspondante.
Il est rappelé que l’affichage de certains champs du formulaire peut légèrement différer
selon le navigateur utilisé.
Travail demandé :
Partie 1 : Formulaire HTML5
Créer l’en-tête HTML, le titre (avec une balise h1) et la phrase de bas de page.
Créer le formulaire avec la balise <form>. La cible (action) du formulaire 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.
Ajouter les champs noms et prénoms (type text).
Ajouter le champ date de naissance (type date).
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).
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>
Ajouter le champ code postal (type number).
Ajouter les champs adresse électronique et page personnelle (types email et url).
Ajouter le champ téléphone portable (type text).
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 un champ value (qui peut être identique
à la valeur affichée).
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").
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 haut !).
Ajouter le bouton « Envoyer » (balise button avec type submit).
Partie2 : Mise en forme du formulaire
Effectuer une copie de la page réalisée à l’exercice précédent, et la nommer VotreNom-
formulaire2.html. Créer une feuille de style CSS vierge VotreNom-formulaire.css.
Ajouter à VotreNom-formulaire2.html un lien vers la feuille de style, en ajoutant dans
l’en-tête HTML (<head>) une balise <link rel="stylesheet" ... />.
Dans la suite de l’exercice, il conviendra de remplir la feuille de style VotreNom-
formulaire.css de façon à obtenir l’apparence de la page correspondante. Les seules
modifications autorisées au fichier HTML VotreNom-formulaire2.html seront l’ajout d’un
nombre minimal d’attributs de type class ou id dans le corps de la page. Toutes les autres
modifications se feront dans le fichier CSS.
Modifier la feuille de style afin que toute la page (sélecteur body) soit par défaut en police
de caractères à chasse fixe (font-family: monospace ;).
Mettre en forme le titre (sélecteur h1) comme suit : la marge supérieure (margin-top) est
de 2em, son alignement est centré (text-align:center;), et la barre inférieure est noire de largeur
10 pixels (border-bottom: solid black 10px;).
Ajouter dans le code HTML un id="main" au cadre (fieldset) principal. Modifier la feuille
de style afin 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 ».
Modifier la feuille de style afin que les légendes de cadres (sélecteur legend) s’affichent en
majuscules (text-transform: uppercase;).
Modifier la feuille de style afin que les étiquettes (sélecteur label) concernées s’affichent
en gras.
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;.
Mettre en forme le cadre connaissances : la couleur du texte est rouge, celle du fond est
#C0C0FF.
Mettre en forme la phrase en bas de page, comme suit : cette phrase est séparée de ce qui
précède d’un espace de 2em, les barres supérieures et inférieures sont bleues et d’une largeur
de 5 pixels, le texte est centré, et sa taille est x-small.
Partie 3 : Améliorations et vérifications
Nous allons améliorer le fichier VotreNom-formulaire2.html (et uniquement ce fichier).
Modifier votre formulaire pour que le semestre sélectionné par défaut soit S2.
Modifier votre formulaire pour que seule la case « HTML » soit cochée par défaut.
Modifier votre formulaire pour que le code postal ne puisse avoir que 4 chiffres au
maximum
Modifier votre formulaire pour que le numéro de téléphone portable soit un numéro de
téléphone tunisien valide (8 chiffres commençant par un 98). En cas d’erreur, le navigateur doit
afficher un message contenant « Numéro à 8 chiffres sans espace et commençant par 98 ».
(L’erreur doit s’afficher lorsque l’on clique sur le bouton « Envoyer ».)
Ajouter un bouton qui, lorsque l’on clique dessus, réinitialise tous les champs du formulaire
à leur valeur par défaut.
