From 075d626ebbca400de57a7f813652d1521c292830 Mon Sep 17 00:00:00 2001 From: matthieureynier Date: Thu, 18 Jun 2026 11:41:16 +0200 Subject: [PATCH] Guide contact: relecture form, redimensionnement borne textarea (min/max), centrage margin auto Co-Authored-By: Claude Opus 4.8 (1M context) --- PROCHAINE_ETAPE_contact.md | 419 +++++++++++++++++++++++++++++++++++++ 1 file changed, 419 insertions(+) create mode 100644 PROCHAINE_ETAPE_contact.md diff --git a/PROCHAINE_ETAPE_contact.md b/PROCHAINE_ETAPE_contact.md new file mode 100644 index 0000000..643e321 --- /dev/null +++ b/PROCHAINE_ETAPE_contact.md @@ -0,0 +1,419 @@ +# 📬 Page Contact — relecture & prochaine étape + +Salut Mélissa ! 👋 + +Ta page contact prend forme : le tableau de l'équipe est sympa, le formulaire est en place, et le bouton « contact » qui reste enfoncé pour montrer la page courante (`.instyled`) est une **très bonne idée** d'ergonomie. Bravo ! 🎉 + +Ce guide a trois objectifs : +1. Corriger **4 bugs** (avec l'explication, pas juste la solution). +2. T'apprendre à **définir et limiter une ` +``` + +Par défaut elle est petite, et l'utilisateur peut écrire **sans aucune limite**. On va la **cadrer**. + +### 1️⃣ Lui donner une taille de départ : `rows` et `cols` + +```html + +``` + +- `rows` = nombre de **lignes** visibles (la hauteur). +- `cols` = largeur en **caractères**. + +> 🔎 Ce ne sont **pas** des pixels : c'est « combien de lignes/caractères je vois » au départ. + +### 2️⃣ Limiter le nombre de caractères : `maxlength` + +```html + +``` + +`maxlength="500"` = impossible de taper plus de 500 caractères. Le navigateur bloque **tout seul**, sans JavaScript. 👍 + +### 3️⃣ Cadrer le redimensionnement : `resize` en CSS + +La petite poignée en bas à droite permet à l'utilisateur d'étirer la zone et de **casser ta mise en page**. On la contrôle en CSS : + +```css +#contacter { + resize: vertical; /* étirement en hauteur seulement (recommandé) */ + /* resize: none; pour l'interdire complètement */ + width: 100%; + min-height: 120px; +} +``` + +> 💡 **À retenir :** +> - `rows` / `cols` → **taille de départ**. +> - `maxlength` → **limite** le nombre de caractères (le navigateur bloque tout seul). +> - `resize` (CSS) → contrôle la **poignée** d'étirement (`vertical`, `horizontal`, `none`, `both`). + +### 4️⃣ 👉 Votre question : laisser l'utilisateur redimensionner, mais **entre un min et un max** + +Tu as écrit pour l'instant : + +```css +textarea { + resize: initial; /* "initial" = la valeur par défaut = "both" : étirable dans TOUS les sens, sans limite */ + width: 527px; + height: 80px; +} +``` + +`resize: initial` remet la valeur **par défaut**, c'est-à-dire `both` : l'utilisateur peut tout étirer, **dans toutes les directions et sans aucune borne**. Il peut donc rendre la zone énorme et **casser ta mise en page**. Vous m'avez justement demandé comment **autoriser** l'agrandissement **sans qu'il parte trop grand (ni trop petit)**. La recette tient en 2 idées qui se combinent : + +1. **`resize`** dit *dans quelle direction* on peut étirer. +2. **`min-*` / `max-*`** disent *jusqu'où* on peut aller. + +```css +#contacter { + resize: vertical; /* on autorise l'étirement, mais en HAUTEUR seulement */ + + min-height: 80px; /* impossible de la réduire en dessous de 80px */ + max-height: 300px; /* impossible de l'agrandir au-delà de 300px */ + + width: 100%; /* largeur pilotée en CSS, pas par l'utilisateur */ +} +``` + +Avec ça : l'utilisateur attrape la poignée, tire vers le bas pour avoir plus de place… mais **la zone refuse de dépasser 300px** et **de descendre sous 80px**. Ta mise en page reste protégée. 🎉 + +#### Et si on veut autoriser les **deux** sens (vertical **et** horizontal) ? + +Même principe, mais avec **4 bornes** : 2 pour la hauteur, 2 pour la largeur. On passe `resize` à `both` (c'est d'ailleurs ce que faisait ton `resize: initial`, mais cette fois **borné**) : + +```css +#contacter { + resize: both; /* la poignée étire en hauteur ET en largeur */ + + min-height: 80px; /* bornes verticales */ + max-height: 300px; + + min-width: 200px; /* bornes horizontales */ + max-width: 100%; /* ne dépasse jamais la largeur du parent → pas de scroll */ +} +``` + +Chaque direction a sa paire `min`/`max` : +- **hauteur** → `min-height` / `max-height` +- **largeur** → `min-width` / `max-width` + +L'utilisateur peut alors étirer dans tous les sens, mais **jamais au-delà** de ces 4 limites. + +> ⚠️ Le piège classique en horizontal : mets `max-width: 100%` (et pas un grand `527px` fixe), sinon l'utilisateur peut élargir la zone **plus que l'écran** et faire apparaître une barre de défilement horizontale. + +Récap des valeurs de `resize` : + +| `resize` | Ce que l'utilisateur peut étirer | +|---|---| +| `none` | rien (verrouillé) | +| `vertical` | la hauteur seulement (le plus confortable pour un message) | +| `horizontal` | la largeur seulement | +| `both` | les deux — c'est ce que donne `initial` par défaut | + +> 🎯 Petit conseil de ciblage : vise plutôt `#contacter` (l'id de **ta** textarea) que `textarea` tout court. Le sélecteur `textarea` toucherait **toutes** les zones de texte du site, même celles que Guillaume ajoutera sur sa page. + +> 💡 **À retenir :** `resize` = **la direction** autorisée. `min-height`/`max-height` (et `min-width`/`max-width`) = **les bornes**. Les deux ensemble = un redimensionnement libre **mais encadré**. + +--- + +## 🧭 Petit plus — centrer un bloc sans le « pousser » avec `margin-left` + +J'ai vu que tu centres ta table **et** ton nouveau `.form` avec `margin-left: 600px` / `620px`. Ça « marche » sur ton écran… mais sur un écran plus petit, le bloc est **poussé hors de la fenêtre** → barre de défilement horizontale. Pour **vraiment centrer** un bloc de largeur fixe : + +```css +.form { + width: 35%; + margin-left: auto; /* "auto" à gauche ET à droite = */ + margin-right: auto; /* le navigateur répartit l'espace → bloc centré */ + /* on enlève le margin-left: 620px */ +} +``` + +> 💡 **À retenir :** `margin: auto` à gauche **et** à droite centre un bloc qui a une largeur. C'est l'outil correct ; `margin-left: 620px` ne fait que le décaler et casse l'affichage sur petit écran. + +--- + +## 🚀 Ta première mission JavaScript : le **compteur de caractères** + +Jusqu'ici tu as fait du HTML (la **structure**) et du CSS (l'**apparence**). Le JavaScript, c'est la **3ᵉ couche** : le **comportement**, ce qui réagit en direct. 🧠 + +On va le faire **en mode tuto** : tu construis petit bout par petit bout, et **tu testes à chaque étape**. Ne copie pas tout d'un coup — avance palier par palier, c'est comme ça qu'on comprend. 🙂 + +**Objectif final :** `maxlength` empêche de dépasser 500 caractères… mais l'utilisateur ne **voit pas** combien il lui en reste. On va afficher un **compteur en direct** : « Il vous reste 437 caractères ». C'est exactement ce que font Twitter/X, les SMS, etc. + +--- + +### 🪜 Étape 0 — Découvrir la console (ton meilleur ami) + +Ouvre ta page dans le navigateur, puis appuie sur **F12** → onglet **Console**. C'est là que le JS « parle ». + +Crée un fichier `contact.js` avec une seule ligne : + +```js +console.log("Mon fichier JS est bien chargé !"); +``` + +Et branche-le en bas du ``, **juste avant** `` : + +```html + +``` + +> 🔎 Pourquoi à la fin du body ? Parce que le JS s'exécute de haut en bas. S'il se lance **avant** que le HTML existe, il ne trouve rien à manipuler. À la fin, tout le HTML est déjà là. 👍 + +**✅ Teste maintenant :** recharge la page. Tu dois voir ton message dans la Console. Si oui, ton JS est branché. Sinon, vérifie le chemin du `src`. + +--- + +### 🪜 Étape 1 — Ajouter l'affichage du compteur + +Sous ta textarea, ajoute la ligne qui affichera le décompte : + +```html + +

Il vous reste 500 caractères.

+``` + +**✅ Teste maintenant :** tu dois lire « Il vous reste 500 caractères ». Pour l'instant ce 500 est figé, on va le rendre vivant. + +> 🔎 Le `` est juste une petite « boîte » dans laquelle le JS viendra écrire le nombre. Son `id` est l'étiquette par laquelle on va l'attraper. + +--- + +### 🪜 Étape 2 — Attraper les éléments depuis le JS + +Dans `contact.js`, remplace ton `console.log` de test par : + +```js +const zoneMessage = document.getElementById("contacter"); // ta textarea +const compteur = document.getElementById("restant"); // le + +console.log(zoneMessage); // pour vérifier qu'on l'a bien trouvée +``` + +**✅ Teste maintenant :** dans la Console tu dois voir s'afficher ta `