← Mois 1 — Fondations du Web & HTMLSemaine 435 min

Formulaires HTML complets

Objectifs

Construire form/label/input/select/textarea
Utiliser types HTML5 et validation native
Grouper avec fieldset/legend

Cours

Un bon formulaire relie chaque contrôle à un label (for/id). Sans label, l’accessibilité et le mobile (zones de tap) souffrent.

Types utiles : email, tel, url, number, date, password, search, file, checkbox, radio. autocomplete améliore l’UX et la conformité.

required, minlength, pattern, min/max offrent une validation native. Ce n’est pas suffisant côté sécurité : il faudra revalider serveur (Next.js Route Handlers plus tard).

fieldset/legend pour regrouper (ex. adresse de livraison). button type="submit" vs type="button" : une erreur classique qui soumet trop tôt.

method et action existent en HTML pur ; avec Next.js on préfère souvent des Server Actions ou fetch vers une API.

Atelier pratique

Ajoute required, un champ nom text, et un textarea message liés à des labels.

○ required○ type="text"○ <textarea✓ <label

<form>
      <label for="email">Email</label>
      <input id="email" name="email" type="email" />
      <button type="submit">Envoyer</button>
    </form>

Évaluation

1. Pourquoi associer label et input ?

Précédente Suivante