23 - Formulaire Web

Cours associé : 13 - IHM Web .

QCM – vérification des prérequis

Pour chaque question, une seule réponse est correcte.

1. Quelle balise HTML délimite un formulaire ?

• A. <input>
• B. <form>
• C. <div>
• D. <fieldset>

Correction publiée après la séance.

2. Quel attribut de <input> détermine la nature du champ (texte, bouton, case à cocher…) ?

• A. name
• B. value
• C. type
• D. id

Correction publiée après la séance.

Deux autres questions, sur les méthodes GET et POST et sur la balise <label>, portent sur des notions découvertes dans ce TP : elles se trouvent dans le QCM de bilan, à la fin de la fiche.

Dans ce TP nous allons découvrir la construction de formulaires. Les formulaires sont monnaie courante sur Internet et permettent à un utilisateur de saisir des informations qui seront analysées, traitées voire stockées sur un serveur.

Exercice 1 - Construction du squelette du formulaire

Commencez par recopier le code suivant pour créer une base de formulaire :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Exemple de formulaire</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <!-- Titre du formulaire -->
    <p>Formulaire d'inscription</p>
    <form name="formulaire">
      <!---------------------------------------------->
      <!-- Partie 1 : Renseignements administratifs -->
      <!---------------------------------------------->
      <p>Renseignements administratifs</p>
      <!-- Nom -->

      <label for="Nom">Nom </label>
      <input id="Nom" name="Nom" size="50" maxlength="40" type="text">
      <!-------------------------------------->
      <!-- Partie 2 : Options d'inscription -->
      <!-------------------------------------->
      <!--------------------------->
      <!-- Partie 3 : Validation -->
      <!--------------------------->
      <input value="Valider l'inscription" type="submit">
    </form>
  </body>
</html>

Prenez le temps d’analyser la structure de ce code et d’en comprendre les différentes balises.

Nous attirons particulièrement votre attention sur la balise <form> qui représente la section contenant les contrôles du formulaire permettant à un utilisateur d’envoyer des données à un serveur Web (nous reviendrons sur cette partie plus tard). Les éléments du formulaire sont définis par les balises <input> (deux sont présentes dans le code proposé). Une balise <input> contient un attribut type qui permet de définir la nature du champ. Dans cet exemple nous utilisons deux types de champ différents, le type text pour obtenir un champ de saisie et un type submit pour obtenir un bouton permettant de soumettre le formulaire.

La balise <label> permet de définir un texte d’information associé à une balise <input>, c’est une balise importante pour que le formulaire soit accessible aux personnes en situation de handicap (notamment pour être lu par synthèse vocale). L’association entre une balise <label> et une balise <input> est spécifiée à l’aide de l’attribut for du <label>, qui reprend l’id de l’<input> de ces dernières balises.

Exercice 2 - Ajout de nouveaux champs interactifs

Modifiez le code donné à l’exercice précédent pour compléter la partie 1 du formulaire et ajouter des champs de saisie pour inviter l’utilisateur à indiquer son prénom et son adresse électronique.

Dans la partie 2 (options d’inscription), vous allez aussi ajouter une liste déroulante pour demander à l’utilisateur s’il sera présent au déjeuner et s’il a des restrictions alimentaires.

Aide. Pour créer une liste déroulante vous aurez à utiliser une balise <select> : https://www.w3schools.com/tags/tag_select.asp

<label for="Dejeuner">Présence au déjeuner </label>
<select id="Dejeuner" name="Dejeuner">
  <option value="Non">Non</option>
  <option value="...">...</option>
</select>

Vous devriez obtenir le résultat suivant :

Formulaire d'inscription

Pour aller plus loin : n’hésitez pas à créer votre propre CSS pour personnaliser votre formulaire.

Exercice 3 - Envoi des données du formulaire au serveur

Comme nous l’avons évoqué en introduction, un formulaire permet d’obtenir des informations sur un utilisateur pour, par exemple, les stocker sur un serveur. Le programme sur le serveur exploitant les données du formulaire peut être écrit avec différents langages comme PHP ou Python. Pour le besoin de cet exercice nous avons installé, avec le site, un petit programme (une fonction hébergée chez Netlify) qui construit dynamiquement une page en fonction des données saisies dans le formulaire. Cette page se trouve à l’adresse : https://modest-murdock-304272.netlify.app/.netlify/functions/formulaire . Si vous essayez de consulter cette page vous obtiendrez l’affichage ci-dessous qui montre que le serveur n’a pu récupérer aucune donnée du formulaire (normal puisque vous tentez d’accéder à cette page sans avoir complété le formulaire).

Nous allons modifier le formulaire pour lui demander d’envoyer les données saisies à cette adresse. Pour ce faire modifier la balise <form> comme suit :

<form name="formulaire" action="https://modest-murdock-304272.netlify.app/.netlify/functions/formulaire"
target="_blank">

Deux paramètres sont ainsi ajoutés à la balise <form>, l’attribut action permet d’indiquer l’adresse à laquelle envoyer les données du formulaire et l’attribut target permet d’ouvrir la réponse du serveur dans un nouvel onglet du navigateur. Complétez votre formulaire et cliquez sur le bouton « Valider l’inscription » et vérifiez que la page générée par le serveur contient bien les données saisies dans le formulaire. N’hésitez pas à réaliser plusieurs tentatives.

Exercice 4 - Différences entre l’envoi des données par GET et par POST

Lorsqu’un formulaire envoie des données au serveur, deux méthodes de transmission sont possibles, la méthode GET et la méthode POST (la méthode GET est celle par défaut). La méthode GET communique les données du formulaire au serveur en les intégrant directement dans l’url. Dans les deux cas, le navigateur envoie une requête HTTP (HyperText Transfer Protocol) au serveur. Avec la méthode POST, les données du formulaire sont placées dans le corps de cette requête et non dans l’URL : elles n’apparaissent pas dans la barre d’adresse, mais elles circulent en clair tant que le site n’utilise pas HTTPS.

Complétez à nouveau le formulaire et validez votre saisie puis observez l’URL - Uniform Resource Locator - de la page ouverte dans le nouvel onglet. Vous remarquerez que cette URL contient la base indiquée dans l’attribut action de la balise <form> suivie de la séquence :

?Nom=[valeur]&Prenom=[valeur]&…

Le « ? » sépare la base de l’URL des données du formulaire qui sont séparées entre elles par le caractère « & ».

Modifiez les valeurs de l’URL et vérifiez que l’affichage généré par le serveur prend bien en compte les modifications opérées.

Vous allez maintenant expérimenter la méthode POST en modifiant votre balise <form> pour définir l’attribut method à la valeur post comme suit :

<form name="formulaire" method="post"
action="https://modest-murdock-304272.netlify.app/.netlify/functions/formulaire" target="_blank">

Complétez à nouveau le formulaire et constatez que cette fois le serveur a bien récupéré les données du formulaire sans que celles-ci n’aient été encodées dans l’URL.

QCM de bilan

Pour chaque question, une seule réponse est correcte.

1. Quelle est la différence entre les méthodes GET et POST ?

• A. GET est plus sécurisé que POST
• B. GET transmet les données dans l’URL, POST les transmet dans le corps de la requête HTTP
• C. POST ne peut envoyer que du texte
• D. GET est utilisé uniquement avec JavaScript

Correction publiée après la séance.

2. À quoi sert la balise <label> associée à un <input> ?

• A. Elle met en forme le champ avec du CSS
• B. Elle rend le formulaire accessible (synthèse vocale) et cliquable
• C. Elle envoie les données au serveur
• D. Elle empêche l’utilisateur de modifier le champ

Correction publiée après la séance.