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>
This commit is contained in:
Claude Opus 4.8
@@ -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.
|
||||
Reference in New Issue
Block a user