stagiaire/EXPLICATION_form.md

📨 À quoi sert vraiment une balise <form> ?

Tu as un <form> autour de ton formulaire de contact, 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="prenom"    ...>
<input type="email" name="email"     ...>
<textarea          name="contacter"></textarea>

→ au moment de l'envoi, le navigateur construit quelque chose comme : prenom = Mélissa, email = melissa@mail.com, contacter = ... Un champ sans name est tout simplement ignoré à l'envoi, même s'il est rempli.

💬 C'est aussi pour ça que FormData (Niveau 5, exo 8) lit les champs par leur name : tout est lié.

⚠️ Rappel utile : pour que l'envoi parte, le bouton doit être dans le <form> et être un type="submit" (un <button> sans type précisé compte comme submit par défaut).

---

2. L'attribut action : OÙ vont les données

<form method="get" action="">

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 : la page se contente de se recharger. 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 le message, afficher le prénom dans une alerte…). Tu l'as déjà fait — c'est cette logique-là qui « remplace » le serveur pour l'instant.

---

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" (ce que tu utilises)

Les données sont collées dans l'URL, après un point d'interrogation :

contact.html?prenom=Mélissa&email=melissa@mail.com&contacter=Bonjour...

• ✅ 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"

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…

💡 La règle simple :

• GET = « je demande des infos » (recherche, filtre, consultation).
• POST = « j'envoie / je modifie des infos » (formulaire de contact, inscription). Pour un formulaire de contact où l'on envoie un message, method="post" serait en fait plus adapté que get. Essaie de le passer en post et regarde la différence avec l'expérience ci-dessous. 🙂

---

🔬 Une petite expérience pour bien voir la différence

1. Garde ton method="get" actuel. Remplis les champs, clique « Envoyer », et regarde la barre d'adresse : tu verras tes valeurs apparaître après le ? (?prenom=...&email=...).
2. Passe maintenant en method="post", recommence : 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.

🔎 Astuce : pour faire l'expérience proprement, désactive temporairement ton preventDefault() dans le JS — sinon il empêche justement l'envoi par défaut, et tu ne verras pas l'URL changer.

---

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