# 📨 À 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.