Correction contact: script mal ferme (flotte.js), 200 serveur vs reponse navigateur, chemin fetch, bouton Effacer type submit, label for/id

CORRECTION_fetch_et_boutons.md

@@ -0,0 +1,119 @@
+# 🔧 Corrections — `fetch` (le 200), script qui ne charge pas, et boutons
+
+Tu vois un **`200`** dans la console **Python** mais tu ne vois pas la réponse. C'est normal, et il y a plusieurs petites choses à démêler. On commence par le plus important.
+
+---
+
+## 1. 🐛 LE bug bloquant : ta balise `<script>` est mal fermée
+
+Dans `contact.html` :
+
+```html
+<script src="../flotte.js"</script>     <!-- ❌ il manque le > -->
+```
+
+Regarde bien : après `"../flotte.js"`, il **manque le `>`** qui ferme la balise ouvrante. Du coup le navigateur ne charge **pas** `flotte.js` du tout → **rien** ne s'exécute, même pas ton `console.log`. C'est pour ça que « ça ne s'affiche pas dans la console ».
+
+### ✅ Correction
+```html
+<script src="../flotte.js"></script>    <!-- ✅ une balise <script> = <script ...> ... </script> -->
+```
+
+> 💡 **À retenir :** une balise `<script src="...">` doit être **fermée deux fois** : le `>` de la balise ouvrante, **puis** `</script>`. Compare avec tes deux autres lignes juste au-dessus (`../equipe.js`, `../contact.js`) : elles, elles ont bien le `>`. C'est ce petit `>` qui manque.
+
+---
+
+## 2. 🧠 Le `200` de Python ≠ « j'ai affiché les données »
+
+C'est **la** notion à comprendre ici. Quand tu lances `python3 -m http.server`, tu as **deux mondes** :
+
+| Le **serveur** (terminal Python) | Le **navigateur** (ta page) |
+|---|---|
+| Reçoit les demandes de fichiers et les envoie | Reçoit les fichiers et exécute le JavaScript |
+| Affiche des lignes comme `"GET /vehicules.json" 200` | Affiche tes `console.log` dans **F12 → Console** |
+
+Le **`200`** veut juste dire : *« le serveur a bien trouvé et envoyé le fichier »*. C'est **côté serveur**. Ça ne dit **rien** de ce que ta page en fait.
+
+👉 Donc :
+- La **réponse** (tes données) arrive dans le **navigateur**, pas dans le terminal Python. Pour la voir, regarde la **console du navigateur (F12)**, pas le terminal.
+- Et pour l'afficher **sur la page**, ton `console.log(vehicules)` ne suffit pas : il écrit juste dans la console. Il faudra **construire des lignes** dans le HTML (boucle + `createElement`/`append`, comme pour ton tableau d'équipe).
+
+> 💡 **À retenir :** `200` (terminal Python) = « fichier envoyé », côté serveur. `console.log` = côté navigateur (F12). Afficher **dans la page** = encore une autre étape (du code qui crée des éléments HTML).
+
+---
+
+## 3. 🐛 Le chemin du fichier dans `fetch`
+
+Dans `flotte.js` :
+
+```js
+const reponse = await fetch("./vehicules.json");   // ⚠️ à vérifier
+```
+
+Attention : le chemin d'un `fetch` est calculé **par rapport à la page** (`pages/contact.html`), pas par rapport au fichier `flotte.js`. Or `vehicules.json` est à la **racine** du projet, pas dans `pages/`.
+
+- `./vehicules.json` → cherche `pages/vehicules.json` → **n'existe pas** (erreur 404).
+- `../vehicules.json` → **remonte** d'un dossier puis prend `vehicules.json` à la racine ✅
+
+C'est exactement la même logique que tes balises `<script src="../equipe.js">` : le `../` pour remonter de `pages/` vers la racine.
+
+> 🔎 **Comment vérifier ?** Ouvre **F12 → onglet Réseau (Network)**, recharge, et regarde la ligne `vehicules.json` : si c'est **404 (rouge)**, c'est le chemin ; si c'est **200**, le fichier est bien chargé et le souci est ailleurs (le script mal fermé du point 1).
+
+---
+
+## 4. ✅ Une fois les 3 points réglés
+
+Ton `console.log(vehicules)` devrait afficher ton tableau de 3 véhicules **dans la console du navigateur (F12)**.
+
+Étape suivante (à toi) : au lieu de juste `console.log`, **afficher** la flotte dans la page. Tu as déjà tout le savoir-faire (c'est exactement ton tableau d'équipe) :
+- un `<tbody id="...">` dans le HTML,
+- une boucle sur `vehicules`,
+- `createElement` + `append` pour chaque ligne.
+
+---
+
+# 🧷 Pendant qu'on y est : deux corrections sur ton formulaire
+
+## A. 🐛 Le bouton « Effacer » envoie le formulaire
+
+```html
+<button>Envoyer</button>
+<button type="submit" id="effacer">Effacer</button>   <!-- ❌ submit -->
+```
+
+Ton bouton « Effacer » est en `type="submit"`. Du coup, quand on clique dessus, il **envoie le formulaire** (au lieu de juste vider la zone) : ça déclenche ta validation et l'alerte « Merci d'écrire un message ». Ce n'est pas ce que tu veux.
+
+> 🔁 **Rappel du fichier `EXPLICATION_form.md` :** dans un `<form>`, un `<button>` est **`type="submit"` par défaut**. Pour un bouton qui fait **autre chose** qu'envoyer (effacer, basculer un thème…), il faut explicitement `type="button"`.
+
+### ✅ Correction
+```html
+<button>Envoyer</button>                              <!-- ok : submit par défaut -->
+<button type="button" id="effacer">Effacer</button>  <!-- ✅ ne soumet plus -->
+```
+
+## B. 🐛 Le `<label>` de l'e-mail ne pointe pas sur le bon champ
+
+```html
+<label for="e_mail">Votre e-mail:</label>
+<input ... id="email">          <!-- l'id est "email", pas "e_mail" -->
+```
+
+L'attribut `for` d'un label doit correspondre **exactement** à l'`id` du champ. Là, `for="e_mail"` mais `id="email"` → cliquer sur le libellé ne place pas le curseur dans le champ.
+
+### ✅ Correction
+```html
+<label for="email">Votre e-mail:</label>
+```
+
+> 💡 **À retenir :** `label for="X"` doit matcher `input id="X"`, au caractère près. Bien fait, cliquer le texte du label active le champ (pratique, et important pour l'accessibilité).
+
+---
+
+## ✅ Récap
+
+- [ ] Fermer la balise : `<script src="../flotte.js"></script>` (le `>` manquant)
+- [ ] Comprendre : `200` Python = fichier envoyé ; la réponse se voit dans **F12 → Console**
+- [ ] Corriger le chemin : `fetch("../vehicules.json")` (vérifier dans l'onglet Réseau)
+- [ ] Afficher la flotte dans la page (boucle + `createElement`), pas seulement `console.log`
+- [ ] `type="button"` sur « Effacer »
+- [ ] `label for="email"` (= l'id du champ)