Côté HTML

La balise <form>

Tous les éléments du formulaire doivent être à l'intérieur d'une balise <form>. Cette balise a plusieurs attributs :

  • action : l'URL à laquelle le formulaire doit être envoyé
  • method : la méthode HTTP utilisée pour envoyer le formulaire (GET ou POST)

Lorsque l'utilisateur soumet le formulaire, le navigateur envoie une requête HTTP à l'URL spécifiée dans l'attribut action. Les données du formulaire sont envoyées dans le corps de la requête (pour POST) ou dans l'URL (pour GET).

On utilise GET lorsque :

  • les données sont peu volumineuses
  • elles ne contiennent pas d'informations sensibles
  • elles peuvent être mises en cache et bookmarkées
  • elles n'ont pas d'effet secondaire sur le serveur

On utilise POST lorsque :

  • les données sont volumineuses
  • elles contiennent des informations sensibles
  • elles ne doivent pas être mises en cache
  • elles ont un effet secondaire sur le serveur

En résumé : on utilise GET pour les opérations idempotentes, cachables, non sensibles et de petite taille, et POST dans tous les autres cas.

L'action peut être une URL absolue ou relative. Si elle est relative, elle est relative à l'URL de la page contenant le formulaire. Par exemple, si l'URL de la page est http://localhost:5000/formulaire, et que l'action du formulaire est ../contact, le formulaire sera envoyé à http://localhost:5000/contact.

L'URL relative est souvent utilisée pour envoyer le formulaire à la même page que celle qui l'affiche : action="". Dans le reste des cas, on préfère souvent utiliser l'URL absolue, qui est plus explicite et évite les erreurs de chemin, sans la partie nom de domaine (pour permettre de d'utiliser le même code en développement et en production, entre autres).

<!-- Formulaire de recherche, non sensible, => GET -->
<form action="/search" method="GET">
  <label for="query">Rechercher :</label>
  <input type="text" id="query" name="query">
  <button type="submit">Rechercher</button>
</form>

<!-- Formulaire de contact, envoie un mail = non idempotente => POST -->
<form action="/contact" method="POST">
  <label for="nom">Nom :</label>
  <input type="text" id="nom" name="nom">
  <label for="message">Message :</label>
  <textarea id="message" name="message"></textarea>
  <button type="submit">Envoyer</button>
</form>

Référence : Documentation de la balise form en HTML

Les champs de formulaire

Pour que les données d’un champ de formulaire soient envoyée lors de la soumission du formulaire, il faut que chaque champ ait un attribut name.

Plusieurs balises de formulaire sont disponible selon ce que l’on veut saisir comme données :

  • <input> : pour saisir du texte, un mot de passe, une case à cocher, un bouton radio, une date, une couleur, un fichier, etc. Référence : Documentation de la balise input en HTML

    • name : le nom du champ, utilisé pour identifier la valeur envoyée au serveur
    • id : l'identifiant unique du champ, utilisé pour le lier à une étiquette <label>
    • type : l'attribut type permet de définir le type de champ de saisie
      • text : pour saisir du texte
      • password : pour saisir un mot de passe (les caractères sont masqués)
      • checkbox : pour une case à cocher
      • radio : pour un bouton radio (un choix parmi plusieurs)
      • date : pour choisir une date
      • color : pour choisir une couleur
      • file : pour télécharger un fichier
    • placeholder : un texte d'aide qui s'affiche dans le champ avant la saisie
    • value : la valeur par défaut du champ
    • checked : pour pré-cocher une case à cocher ou un bouton radio
    • disabled : pour désactiver un champ
    • readonly : pour rendre un champ en lecture seule
    • required : pour rendre un champ obligatoire
    • minlength et maxlength : pour définir une longueur minimale et maximale (pour les champs de type text, password, etc.)
    • pattern : pour définir une expression régulière que la valeur doit respecter (pour les champs de type text, password, etc.)
    • size : pour définir la taille du champ (en nombre de caractères)
    • step : pour définir l'incrément de la valeur (pour les champs de type number, date, etc.)
    • min et max : pour définir une valeur minimale et maximale (pour les champs de type number, date, etc.)

  • <textarea> : pour saisir un texte sur plusieurs lignes. Référence : Documentation de la balise textarea en HTML

    • name : le nom du champ, utilisé pour identifier la valeur envoyée au serveur
    • id : l'identifiant unique du champ, utilisé pour le lier à une étiquette <label>
    • rows : le nombre de lignes visibles
    • cols : le nombre de colonnes visibles
    • placeholder : un texte d'aide qui s'affiche dans le champ avant la saisie
    • value : la valeur par défaut du champ
    • disabled : pour désactiver un champ
    • readonly : pour rendre un champ en lecture seule
    • required : pour rendre un champ obligatoire
    • minlength et maxlength : pour définir une longueur minimale et maximale

  • <select> : pour choisir une valeur dans une liste déroulante. Référence : Documentation de la balise select en HTML

    • name : le nom du champ, utilisé pour identifier la valeur envoyée au serveur
    • id : l'identifiant unique du champ, utilisé pour le lier à une étiquette <label>
    • size : le nombre d'options visibles (par défaut 1)
    • multiple : pour permettre de sélectionner plusieurs options
    • disabled : pour désactiver un champ
    • required : pour rendre un champ obligatoire
    • <option> : pour définir une option dans la liste déroulante
      • value : la valeur envoyée au serveur si cette option est sélectionnée
      • selected : pour pré-sélectionner une option
      • disabled : pour désactiver une option
      • label : pour définir un texte d'aide qui s'affiche dans la liste déroulante
      • hidden : pour cacher une option

Envoi du formulaire

L'envoi du formulaire est déclenché par l'utilisateur :

  • avec un clic sur un champ de type submit
  • avec un clic sur un bouton (<button>)
  • en appuyant sur la touche Entrée dans un champ de saisie de texte si un bouton un champ de type submit est présent dans le formulaire (si plusieurs boutons ou champs submit sont présents, l'appui sur entrée est équivalent à un clic sur le premier bouton de type submit ou sur le premier champ de type submit du formulaire)

Exemple : https://codepen.io/jmsolidev/pen/NWqLORY

<form method="POST" action="https://echo.solidev.net/formulaire">
  <label for=" inputnom">Votre nom</label>
  <input type="text" name="nom" id="inputnom" />
  <br />
  <label for="inputpass">Votre mot de passe</label>
  <input type="password" name="pass" id="inputpass" />
  <br />
  <button>Envoyer 1</button>
  <input type="submit" value="Envoyer 2" name="res" />
  <input type="submit" value="Envoyer 3" name="res" />
  <button>Envoyer 4</button>
</form>

Le formulaire ci-dessus envoie les données à l'URL https://echo.solidev.net/formulaire (echo.solidev.net est un service qui affiche comme un écho le détail de la requête envoyée - vous pouvez l'utiliser pour tester vos formulaires ou pour débugger vos applications).

POST /formulaire HTTP/1.1

Host: echo.solidev.net
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3
Content-Length: 27
Content-Type: application/x-www-form-urlencoded
Origin: https://cdpn.io
Priority: u=4
Referer: https://cdpn.io/
Sec-Fetch-Dest: iframe
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: cross-site
Sec-Fetch-User: ?1
Te: trailers
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:136.0) Gecko/20100101 Firefox/136.0
X-Forwarded-Proto: https

nom=machin&pass=supersecret

Si on modifie le formulaire pour qu'il envoie les données avec la méthode GET:

GET /formulaire?nom=machin&pass=supersecret HTTP/1.1

Host: echo.solidev.net
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3
Priority: u=4
Referer: https://cdpn.io/
Sec-Fetch-Dest: iframe
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: cross-site
Sec-Fetch-User: ?1
Te: trailers
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:136.0) Gecko/20100101 Firefox/136.0

Programme

  • SNT : thème Internet
  • NSI 1ère : intéraction client/serveur, requêtes HTTP, réponses du serveur
  • NSI 1ère : formulaire d'une page web, interaction avec l'utilisateur dans une page web