Dans le fichier cartoon_laws.html, ajoutez un sommaire composé de liens vers chaque élément h2 sous la forme d'une liste à puces. Puis ajoutez un lien au niveau de chaque titre de niveau 2 permettant de revenir en haut de la page.

un peu d'aide

Formulaire

Un formulaire est déclaré à l'aide de la balise <form>.
  <form method="post" action="script" enctype="encodage">

  </form>
l'attribut method précise le "mode d'envoi" des données : get ou post.

l'attribut action précise l'url destinatrice des données.

l'attribut enctype précise la façon d'encoder les données. Par défaut, application/x-www-form-urlencoded. Les autres valeurs possibles sont multipart/form-data et text/plain.

Les différents zones d'entrées (input) ici.

Utilisez l'attribut name pour donner un nom aux "variables" du formulaire transmises au serveur.

Utilisez les types html5 dédiés.

Regardez aussi les attributs placeholder, pattern, et les balises fieldset et label.

Exercice 2

Écrivez une page contenant un formulaire qui demande diverses informations à l'aide de contrôles variés :

Champ	Type
Nom	type text
Prénom	type text
Date de naissance	type date
Email	type email
Code postal	type number
Téléphone portable	type tel
Sexe	boutons radio
Semestre	liste déroulante S1, S2, S3, S4.
Niveau en html	type range, entre 0 et 10 avec un pas de 1
Message	zone de texte

Le formulaire contiendra un bouton reset, et submit.

La formulaire sera soumis par la méthode POST au script générique

https://dwarves.iut-fbleau.fr/requete.php

Rajoutez (sans utiliser Javascript), les contrôles suivants au formulaire précédent :

Tous les champs sont obligatoires.
Le nom et le prénom ne contiennent que des lettres, majuscules ou minuscules.
L'adresse de courriel doit être valide.
Le semestre S2 est sélectionné par défaut.
Le code postal a 5 chiffres au maximum.
Le niveau en html par défaut est 5.
Le numéro de portable est un numéro français valide (10 chiffres commençant par 06 ou 07).

L'attribut pattern de l'élément input permet de donner une expression rationnelle que doit vérifier la valeur du champ texte. Le site http://www.html5pattern.com regorge d'exemples utiles.

Texte

Exercice 3

On reprend l'exercice 2 du tp1 dont voici une correction. Appliquez au fichier la feuille de style suivante :

body {
	font-family:sans-serif;
}

h1 {
	font-variant:small-caps;
	text-decoration : underline;
}

h2 {
	background-color:#aaaaaa;
	padding : 10px;
	font-style:italic;
}

span {
	font-family: monospace;
	font-weight:bold;
	color : #aa4512;
}

Expliquez les changements.

Tableaux

Exercice 4

Vous aurez sans doute besoin d'utiliser les propriétés border, border-collapse, width, height.

On reprend l'exercice 4 du tp1, dont voici une correction. Ajoutez une feuille de style pour obtenir le rendu conforme à cela :

Exercice 5

Vous aurez sans doute besoin d'utiliser les attributs colspan et rowspan.

À l'aide d'un tableau, reproduire la figure suivante :