Chapitre 1 · Leçon 3
Collecter des données utilisateur avec les bons éléments
Les formulaires sont l'interface principale entre l'utilisateur et l'application. Un formulaire bien structuré améliore l'expérience, l'accessibilité et la validation côté client.
form.html
1<form action="/api/register" method="POST">
2 <div class="field">
3 <label for="email">Email *</label>
4 <input
5 type="email"
6 id="email"
7 name="email"
8 required
9 autocomplete="email"
10 placeholder="vous@exemple.com"
11 >
12 </div>
13
14 <div class="field">
15 <label for="password">Mot de passe *</label>
16 <input
17 type="password"
18 id="password"
19 name="password"
20 required
21 minlength="8"
22 autocomplete="new-password"
23 >
24 </div>
25
26 <div class="field">
27 <label for="level">Niveau</label>
28 <select id="level" name="level">
29 <option value="">-- Choisir --</option>
30 <option value="junior">Junior (0-2 ans)</option>
31 <option value="mid">Mid (2-5 ans)</option>
32 <option value="senior">Senior (5+ ans)</option>
33 </select>
34 </div>
35
36 <button type="submit">Créer mon compte</button>
37</form>Lie toujours un <label> à son <input> avec for et id. Sans ça, cliquer sur le label ne met pas le focus sur le champ — catastrophe pour l'accessibilité.
type="email" — valide automatiquement le formattype="tel" — ouvre le clavier numérique sur mobiletype="number" min max step — restreint les valeursrequired — rend le champ obligatoirepattern="[A-Za-z]+" — expression régulière de validationminlength maxlength — longueur du texteLa validation HTML est une aide UX, pas une sécurité. N'importe qui peut désactiver JavaScript ou envoyer des requêtes directes. Toujours valider avec Zod/Joi côté backend.