stagiaire/EXPLICATION_form.md

📨 À 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 :

<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

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