TP 15 : formulaires HTML

Licence Informatique/Maths 1ère année

Alexandre Niveau — Jean-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-LOGIN.users.info.unicaen.fr/TW1-2022/TP15/ex1/premier-formulaire.html
(en remplaçant LOGIN par votre nom de login). 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="LOGINS" />
en remplaçant LOGINS par les noms de login 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 dupont210 et durand212 ont travaillé ensemble, ils mettent <meta name="author" content="dupont210,durand212" /> 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.

L'objectif est de reproduire une page contenant un formulaire avec des widgets variés, en respectant les consignes précises de l'énoncé.

Le rendu final de la page est donné dans la figure ci-dessous, mais attention, ne vous lancez pas directement dans la reproduction du modèle ! Continuez d'abord à lire !

Capture d’écran de la page
Capture d’écran de la page
(cliquer pour accéder à l’image pleine taille)

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/TW1/tp/decouverte-formulaires/enonce/recup.php

Il donne des informations à la fois sur les paramètres d'URL et sur les données transmises dans le corps de la requête. Le formulaire de l'exercice servant à transmettre des données, il faudra utiliser la méthode POST, comme expliqué en cours. Cependant, n'hésitez pas à regarder ce qui se passe si vous utilisez la méthode GET. Vous pouvez aussi modifier les paramètres d'URL « à la main » : recup.php?ma-clef=ma-valeur&image=whale (le script réagit au paramètre d'URL image).

Consignes

Vous trouverez ci-dessous quelques consignes à respecter pour chaque partie du formulaire, dans l’ordre où vous les rencontrerez dans la page. Il faut procéder un champ après l'autre. Cependant, 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. La page de récupération doit vous dire quelque chose pour chacun des champs : par exemple, si le champ pseudo est mis en place et rempli correctement, la page saluera l'internaute par son pseudo. Si vous avez ajouté un champ et que la page n'en dit rien, ce n'est pas normal !

Lorsque vous testez, essayez de remplir les champs de diverses façons : le navigateur est capable de détecter certaines erreurs (si l’internaute oublie un champ obligatoire, ou fait une saisie incohérente, par exemple pour une adresse mail) et d'empêcher la soumission du formulaire.

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.

Pensez à comparer le rendu dans plusieurs navigateurs : les widgets color et date notamment sont assez différents d'un navigateur à l'autre.

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).
  • Le champ pour le pseudo doit être rendu obligatoire, et le curseur doit être placé dans le champ à l'arrivée sur la page.
  • Le champ « mot de passe » doit utiliser le nom pass et ne doit pas être affiché en clair dans votre formulaire (on doit voir des étoiles ou des ronds à la place des caractères saisis). Attention, il sera affiché en clair sur la page de récupération, donc ne saisissez pas votre vrai mot de passe·! C'est juste un exercice, aucune des valeurs que vous saisissez n'a vraiment d'importance !
  • 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 (clef adresse-email), l’autre une URL (clef lien), et la dernière un numéro de téléphone (clef telephone).

  • 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 (clef departement) 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 (clef niveau-info) 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 (clef naissance) et la couleur préférée (clef couleur) doivent utiliser les widgets appropriés.
  • Pour les sports déjà pratiqués, il doit bien sûr être possible de cocher plusieurs réponses. Chaque case sera nommée avec le nom exact du sport (en minuscules — par exemple badminton).
  • Pour le pays d’origine (clef pays), 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 Angleterre ainsi que « Autre pays européen » et « Autre pays hors Europe ». Les valeurs ne devront pas être transmises telles quelles : pour les pays on utilisera leur initiale (en minuscule), et pour les autres on utilisera respectivement europe et monde.

Quatrième partie, « Vos études »

  • Pour la première question sur le bac (clef bac), une seule réponse doit être possible. Par défaut l'option sélectionnée doit être « autre ». Les valeurs transmises doivent être respectivement general, pro, techno, ou autre.
  • La deuxième question porte sur l’inscription cette année (clef inscription). Le menu déroulant doit être organisé par filière (voir capture ci-dessous), et on ne doit pas pouvoir sélectionner les titres de catégories en gras (« Informatique », « Maths »). Les valeurs transmises doivent être respectivement L1I, L1Ia, LAS, L1M, et C.
    Menu ouvert
    Menu ouvert
    (cliquer pour accéder à l’image pleine taille)
  • La dernière question propose à l'internaute de laisser un paragraphe sur ses motivations (clef 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.