9. Développement Web - TP9

Résultat attendu :

Notez que la police d'affichage
a été modifiée en Verdana

9.1. Objectif

On désire appliquer un style au formulaire du TP 8.

Commencer par ajouter un lien dans la partie head vers un fichier style.css dans le fichier formulaire.html.

9.1.1. body

La balise body utilise une police Verdana en 14 pixels.

9.1.2. main et section

La balise main sera affichée en utilisant flexbox et on centre les éléments sur les deux axes.

La section qui contient le formulaire aura une largeur de 600 pixels et ses éléments seront affichés en utilisant flexbox suivant une seule colonne.

Le texte dans la balise h2 doit être centré.

9.1.3. Formulaire

Le formulaire occupe 100% de la section.

Les différents fieldset possèdent :

• une marge de 10 pixels en hauteur et en largeur
• une couleur de fond Moccasin
• une bordure de 2 pixels affichée en noir

9.1.4. legend

La balise legend est également modifiée comme suit :

• elle possède une couleur de fond fixée à blanc
• la couleur d'affichage du texte est DarkSlateGray
• la police est en gras et est sans-serif
• l'espacement entre les lettres est de 2 pixels (letter-spacing)
• le padding est de 2 pixels dans toutes les directions
• enfin le bord est de 1 pixel en couleur noire

9.1.5. label

La balise label se voit attribuée le style suivant :

• elle possède une marge de 5 pixels dans toutes les directions
• elle possède une largeur de 150 pixels
• le text est affiché collé à droite
• le display est de type inline-block
• l'alignement vertical est poussé ver le haut (top)

9.1.6. input et select

La balise select possède une marge de 5 pixels dans toutes les directions.

La balise input possède également une marge de 5 pixels et une couleur de fond Beige.

Pour la balise input de type submit, on a :

• une couleur de fond de type Sienna
• une couleur d'affichage en blanc
• un affichage en gras