TP 11 : formulaires HTML

Licence Informatique/Maths 1e année

Alexandre NiveauJean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Ce TP vise à vous faire manipuler les éléments HTML de formulaires.

Notes de cours

Exercice 1 — Découverte des éléments de formulaire #

Adapté d’un exercice de Françoise Lambert

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-NUMETU.users.info.unicaen.fr/TW1/TP11/ex1/index.html
(en remplaçant NUMETU par le numéro correspondant). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="NUMETUS" />
en remplaçant NUMETUS par les numéros des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si 21012343 et 20922462 ont travaillé ensemble, ils mettent <meta name="author" content="21012343,20922462" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

Vous devez reproduire la page demandée, dont le rendu est donné par la capture ci-dessous, et qui contient des formulaires variés.

Attention, il ne faut pas se contenter de reproduire l'apparence de la page : il faut aussi respecter les consignes précisées ci-dessous.

Il faudra utiliser plusieurs navigateurs pour comparer le rendu (par exemple, color ou date ne sont pas correctement reconnus de la même façon par tous les navigateurs).

Capture d'écran de la page
Capture d'écran de la page

Que deviennent les données envoyées par le formulaire ?

Le formulaire contient un attribut action qui indique l’URL du script qui va recueillir données et les traiter, par exemple en stockant les valeurs dans une base de données où en lançant une action spécifique. L’écriture d’un tel script étant complexe, nous vous proposons d’utiliser pour l’instant un script en PHP que nous avons déjà écrit pour vous et qui se contente d'afficher une table contenant tous les champs reçus ainsi que les valeurs pour chaque champ. Cela vous permettra de visualiser les données transmises par votre formulaire.

Ce script se trouve à l’URL suivante :

https://ensweb.users.info.unicaen.fr/tp/decouverte-formulaires/recup.php

Ce formulaire sert à transmettre des données, il faudra donc utiliser la méthode POST comme expliqué en cours. Mais n'hésitez pas à regarder ce qui se passe si vous utilisez la méthode GET. Vous pouvez aussi modifier les paramètres « à la main » : recup.php?ma-clef=ma-valeur&mon-autre-clef=43.

Consignes

Vous trouverez ci-dessous quelques consignes à respecter pour chaque partie du formulaire, dans l’ordre où vous les rencontrerez dans la page. Mettez dès le début le bouton de soumission du formulaire (qui sera au final tout en bas), car ça vous permettra de tester vos champs : vérifiez bien que les données sont transmises. Vous verrez aussi les erreurs affichées quand l’internaute oublie un champ obligatoire ou fait une saisie incohérente, par exemple pour une adresse mail.

Comme d’habitude, vous devez vérifier votre page avec le validateur W3C. Vous aurez peut-être des messages d’avertissement (warning) pour des choses qui ne sont pas reconnues par tous les navigateurs : ce n’est pas grave, tant que ce ne sont que des avertissements et pas des erreurs. Attention à l'accessibilité et à l'ergonomie : les descriptions des champs doivent leur être associées. (En particulier, cliquer sur une description doit placer la souris dans le champ associé, ou cocher la case associée, etc.)

Notez bien que le résultat doit être obtenu en utilisant uniquement du HTML, sans CSS et évidemment sans JavaScript.

Première partie, « Saisie des identifiants »

  • Le champ « Votre pseudo » doit transmettre la donnée sous le nom pseudo (vérifiez avec la page de récupération). Pour les champs suivants, vous pourrez choisir vous-mêmes le nom (c'est-à-dire la « clef » du couple clef-valeur), mais n'oubliez pas que si vous ne mettez pas de nom, le formulaire ne peut rien transmettre.
  • Le champ pour le pseudo doit être rendu obligatoire.
  • Le champ « mot de passe », ne doit pas apparaître en clair (on doit voir des étoiles ou des ronds à la place des caractères saisis).
  • Le formulaire doit limiter la longueur du pseudo à 10 caractères, et vérifier qu'au contraire le mot de passe fait au moins 12 caractères, pour des raisons de sécurité.

Deuxième partie, « Quelques renseignements sur vous »

Cette partie comprend trois questions ; l’une demande une adresse mail, l’autre une URL, et la dernière un numéro de téléphone.

  • Utilisez les bons types de champ, pour que le navigateur puisse faire des vérifications de forme et puisse proposer un clavier adapté aux internautes sur leur smartphone.
  • Pour le téléphone on ne permettra de saisir que 10 caractères exactement (ni plus ni moins).
  • Pour la zone de saisie de l’URL on mettra un champ de saisie de largeur assez grande (au moins 50 caractères).
  • Pour les trois champs, on mettra un exemple d'utilisation ; attention, ce ne sont pas des valeurs par défaut (on doit pouvoir remplir les champs sans avoir à effacer le contenu) !

Troisième partie, « Quelques statistiques »

  • Le département doit être un nombre entier entre 1 et 100 (l'internaute ne doit pas pouvoir entrer autre chose), 14 devant être la valeur par défaut. (Attention, ce n'est pas un menu déroulant ! On peut saisir le nombre au clavier ou avec les flèches.)
  • Le niveau en informatique doit être saisi grâce à un curseur, qui transmettra une valeur entière entre 0 et 10. Les indications sur les côtés ne sont pas spéciales, elles sont simplement écrites juste avant et juste après le widget !
  • La date de naissance et la couleur préférée doivent utiliser les widgets appropriés (qui ne sont pas encore forcément implémentés ; tester Firefox et Chrome. La capture d'écran a été faite sur un Firefox ne supportant pas le widget de date.).
  • Pour les sports déjà pratiqués, il doit bien sûr être possible de cocher plusieurs réponses.
  • Pour le pays d’origine, le formulaire doit proposer un menu déroulant. la valeur par défaut doit être la France, et le menu déroulant proposera aussi Maroc, Guinée, Chine et Royaume-Uni ainsi que « Autre pays européen » et « Autre pays non européen ».

Quatrième partie, « Vos études »

  • Pour la première question sur le bac, une seule réponse doit être possible (par défaut la valeur est « autre »).
  • La deuxième question porte sur l’inscription cette année. Le menu déroulant doit être organisé par année (voir capture ci-dessous), et on ne doit pas pouvoir sélectionner par exemple « L2 » tout court sans précision.
    select ouvert
  • La dernière question propose à l'internaute de laisser un paragraphe sur ses motivations. Elle comprend une zone de texte comportant plusieurs lignes et suffisamment large. La phrase « pourquoi ce choix, quelles motivations ? » qui apparaît dedans n’est pas une valeur par défaut: elle doit s’effacer automatiquement dès qu’on commence à écrire dans la zone.