28 - Formulaire 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

Réponse : B. La balise <form> englobe l’ensemble des champs et boutons du formulaire. Elle possède notamment les attributs action (URL de destination) et method (GET ou POST).

  • A est faux : <input> définit un champ individuel, pas le formulaire entier.
  • C est faux : <div> est un conteneur générique sans lien spécifique avec les formulaires.
  • D est faux : <fieldset> regroupe des champs à l’intérieur d’un formulaire, mais ne définit pas le formulaire lui-même.

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

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

Réponse : C. L’attribut type peut prendre les valeurs text, password, submit, checkbox, radio, email, etc. C’est lui qui détermine l’apparence et le comportement du champ.

  • A est faux : name identifie le champ dans les données envoyées au serveur.
  • B est faux : value définit la valeur par défaut du champ (ou le texte du bouton).
  • D est faux : id sert à identifier l’élément pour le CSS ou le JavaScript.

3. 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

Réponse : B. Avec GET, les données apparaissent dans l’URL après le ? (ex. page.php?nom=Alice&age=17). Avec POST, elles sont transmises dans le corps de la requête HTTP et ne sont pas visibles dans l’URL.

  • A est faux : c’est l’inverse ; GET expose les données dans l’URL, ce qui les rend visibles dans l’historique du navigateur.
  • C est faux : POST peut transmettre tout type de données (texte, fichiers, etc.).
  • D est faux : GET est la méthode par défaut de tout formulaire HTML, sans aucun JavaScript.

4. À 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

Réponse : B. Le <label> associé (l’attribut for du label reprend l’id du champ) fournit un texte descriptif pour le champ. Il est lu par les lecteurs d’écran (accessibilité) et un clic sur le label active le champ correspondant.

  • A est faux : le CSS est géré par des feuilles de style, pas par <label>.
  • C est faux : c’est le bouton <input type="submit"> qui déclenche l’envoi.
  • D est faux : pour rendre un champ non modifiable, on utilise l’attribut readonly ou disabled.

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 mail.

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

Vous devriez obtenir le résultat suivant :



Formulaire d'inscription

Renseignements administratifs

Options 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 envoi de données et GET et 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. Pour la méthode POST, les données du formulaire sont empaquetées dans une requête HTTP - HyperText Transfer Protocol - et ne sont donc pas visibles par l’utilisateur.

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.


27 - WEB (2) 29 - JavaScript