Devoir pratique STI n°3 : le site du club d'échecs, un formulaire HTML5 d'inscription et le style des formulaires du site

Exercice 1 : l'inscription au tournoi d'échecs (8 pts)

Le club d'échecs veut, sur son site, la page tournoi.html reliée à la feuille de style style.css du site (elle est écrite à l'exercice 2), avec un formulaire envoyé par la méthode POST. Chaque champ a l'identifiant donné entre parenthèses :

• un champ texte obligatoire (nom) avec le texte d'aide « Nom et prénom » ;
• un e-mail (email) ;
• une liste déroulante (niveau) avec les choix Débutant, Moyen et Expert ;
• deux boutons radio de nom categorie, de valeurs junior et senior ;
• une case à cocher (repas) « Je réserve le repas » ;
• une zone de texte de 4 lignes (remarques) ;
• un nombre (age) entre 12 et 19 ;
• un bouton d'envoi « Valider » et un bouton d'effacement « Effacer » ;
• sous le formulaire, un lien « Nous écrire » vers la page contact.html du site.

• 1) Écrire la page tournoi.html (6 pts).
• 2) Choisir la bonne réponse : la méthode qui montre les valeurs envoyées dans l'adresse de la page, la méthode qui les envoie cachées, ce qui relie deux boutons radio pour qu'un seul soit choisi (2 pts).

Exercice 2 : le style des formulaires du site (12 pts)

La page contact.html du site est donnée. Comme tournoi.html (exercice 1), elle est reliée à la feuille de style style.css :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Contact</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <form id="contact">
    <fieldset>
      <legend>Nous écrire</legend>
      <label for="nom">Nom</label>
      <input type="text" id="nom">
      <label for="msg">Message</label>
      <textarea id="msg"></textarea>
      <input type="submit" value="Envoyer" class="envoyer">
    </fieldset>
  </form>
  <p><a href="tournoi.html">Inscription au tournoi</a></p>
</body>
</html>

• 1) Écrire la feuille de style style.css, commune aux deux pages du site, qui donne : a) aux étiquettes (label) un affichage en bloc (chacune sur sa ligne) et un texte en gras ; b) au champ d'identifiant nom et aux zones de texte (textarea) une largeur de 250px, une marge intérieure de 5px et une bordure pleine de 1px de couleur #aab7b8 ; c) à ces mêmes champs un texte de taille 16px ; d) au bouton de classe envoyer un fond #28b463, un texte blanc et aucune bordure ; e) à la légende du cadre un texte de couleur #1b4f72 et de taille 20px (9 pts).
• 2) Choisir le sélecteur CSS de chaque cible : tous les éléments de la page, l'élément d'identifiant nom, les éléments de classe envoyer (3 pts).