From 3586e8fcad2007f76e5b451c1bf9723afa9ccc77 Mon Sep 17 00:00:00 2001
From: matthieureynier <mashuuu.r@gmail.com>
Date: Mon, 22 Jun 2026 14:34:12 +0200
Subject: [PATCH] Explication form: role du form, name, action (OU) et method
 GET/POST (exemple suggestions/POST)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 EXPLICATION_form.md | 92 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 EXPLICATION_form.md

diff --git a/EXPLICATION_form.md b/EXPLICATION_form.md
new file mode 100644
index 0000000..35fa1a0
--- /dev/null
+++ b/EXPLICATION_form.md
@@ -0,0 +1,92 @@
+# 📨 À quoi sert vraiment une balise `<form>` ?
+
+Tu as un `<form>` autour de ton formulaire de suggestions, mais ce qu'il fait « en coulisses » n'est pas forcément clair. Ce fichier explique **à quoi il sert**, puis les deux attributs qui prêtent à confusion : **`action`** et **`method`**.
+
+---
+
+## 1. Le rôle du `<form>` : regrouper et **envoyer** des champs
+
+Un `<form>` est une **enveloppe** autour de plusieurs champs (`<input>`, `<textarea>`…). Son but : permettre à l'utilisateur de **tout envoyer d'un coup**, en un seul geste (le bouton « Envoyer »).
+
+Sans `<form>`, tes champs s'affichent quand même… mais ce ne sont que des cases isolées : il n'y a aucune notion d'« envoi groupé ». Le `<form>`, lui, apporte 3 choses automatiquement :
+
+1. **Il rassemble** toutes les valeurs des champs qu'il contient.
+2. **Il les empaquette** en associant chaque valeur au `name` de son champ.
+3. **Il les envoie** à une adresse, quand on clique sur un bouton `type="submit"`.
+
+> 🔑 **Le détail le plus important : l'attribut `name`.**
+> Seuls les champs qui ont un **`name`** sont envoyés, et c'est ce `name` qui sert d'**étiquette** à la valeur. Dans ton formulaire :
+> ```html
+> <input type="text"  name="user_name"  ...>
+> <input type="email" name="user_mail"  ...>
+> <textarea          name="user_message"></textarea>
+> ```
+> → au moment de l'envoi, le navigateur construit quelque chose comme :
+> `user_name = Dupond`, `user_mail = dupond@mail.com`, `user_message = ...`
+> Un champ **sans `name`** est tout simplement **ignoré** à l'envoi, même s'il est rempli.
+
+> ⚠️ Rappel utile : pour que l'envoi parte, le bouton doit être **dans** le `<form>` et être un `type="submit"` (c'est le cas du tien : « Envoyer le message »).
+
+---
+
+## 2. L'attribut `action` : **OÙ** vont les données
+
+```html
+<form action="" method="post">
+```
+
+`action` indique **l'adresse qui va recevoir** les données — en général un programme **côté serveur** (en PHP, Node, Python…) qui les enregistre, envoie un e-mail, etc.
+
+- `action="https://exemple.com/contact"` → les données partent vers cette adresse.
+- `action=""` (vide, comme chez toi) → elles sont envoyées à **la page actuelle** (la même URL).
+
+> 💡 **Important pour ton cas :** vous n'avez **pas encore de serveur** derrière. Donc `action=""` ne mène nulle part d'utile : au mieux la page se recharge. C'est **normal à ce stade**, et c'est exactement pour ça que tu interceptes l'envoi en **JavaScript** (avec `addEventListener("submit", ...)` et `preventDefault()`) pour faire toi-même quelque chose d'utile (vérifier, afficher un message…).
+
+---
+
+## 3. L'attribut `method` : **COMMENT** les données sont envoyées
+
+Il existe deux façons principales d'envoyer un formulaire : **GET** et **POST**.
+
+### `method="get"`
+Les données sont **collées dans l'URL**, après un point d'interrogation :
+```
+contact.html?user_name=Dupond&user_mail=dupond@mail.com
+```
+- ✅ Visible dans la barre d'adresse → on peut mettre la page en favori, la partager, la recharger.
+- ❌ Tout est visible (à éviter pour un mot de passe), et la longueur est limitée.
+- 👉 Idéal pour **demander / rechercher** des infos (un moteur de recherche utilise GET).
+
+### `method="post"` (ce que tu utilises)
+Les données sont envoyées dans le **corps** de la requête, **pas** dans l'URL.
+- ✅ N'apparaît pas dans la barre d'adresse, pas de limite pratique de taille.
+- 👉 Idéal pour **envoyer / créer / modifier** quelque chose : un message, une inscription, une suggestion…
+
+> 💡 **La règle simple :**
+> - **GET** = « je **demande** des infos » (recherche, filtre, consultation).
+> - **POST** = « j'**envoie / je modifie** des infos » (formulaire de contact, suggestion, inscription).
+> Pour ton formulaire de **suggestions**, `method="post"` est donc le **bon choix**. 👍
+
+---
+
+## 🔬 Une petite expérience pour bien voir la différence
+
+1. Change **temporairement** ton formulaire en `method="get"`.
+2. Remplis les champs, clique « Envoyer », et **regarde la barre d'adresse** : tu verras tes valeurs apparaître après le `?` (`?user_name=...&user_mail=...`).
+3. Remets `method="post"` : les valeurs **disparaissent** de l'URL — elles voyagent « cachées ».
+
+Ça rend très concret ce que veulent dire GET (dans l'URL) et POST (hors de l'URL). C'est aussi pour ça que `name` est essentiel : sans lui, rien n'apparaît dans l'URL, car le navigateur ne sait pas comment étiqueter la valeur.
+
+---
+
+## 📝 Le résumé en une carte
+
+| Élément | À quoi ça sert |
+|---|---|
+| `<form>` | enveloppe qui **regroupe et envoie** les champs d'un coup |
+| `name` (sur chaque champ) | l'**étiquette** de la valeur — sans lui, le champ n'est **pas** envoyé |
+| `type="submit"` (bouton) | **déclenche** l'envoi |
+| `action` | **OÙ** vont les données (l'adresse du serveur ; `""` = la même page) |
+| `method` | **COMMENT** : `get` (dans l'URL, pour demander) / `post` (caché, pour envoyer) |
+
+> 🧭 Tant qu'il n'y a pas de serveur, retiens surtout : le `<form>` **structure** ta saisie, et c'est ton **JavaScript** qui décide quoi en faire à l'envoi. `action`/`method` deviendront vraiment utiles le jour où il y aura un serveur pour recevoir les données.