HTML · Leçon 5

Formulaires

Les formulaires permettent à l'utilisateur d'envoyer des informations : connexion, recherche, commande, contact…

Le trio `form` · `label` · `input`

Remplis le champ puis clique sur Envoyer : la console montre ce qui serait envoyé au serveur.

`for` ↔ `id`

Relie le label à son champ. Clique sur « Prénom : » : le champ s'active !

`name`

Le nom de la donnée envoyée. Sans name, le champ n'est pas envoyé.

`<button>`

Dans un formulaire, il l'envoie par défaut.

Plein de types de champs

Change juste l'attribut type et le navigateur fait le reste. Teste-les tous :

<form>
  <p><label>Email <input type="email" name="email"></label></p>
  <p><label>Mot de passe <input type="password" name="mdp"></label></p>
  <p><label>Quantité <input type="number" name="qte" min="1" max="10" value="1"></label></p>
  <p><label>Date <input type="date" name="date"></label></p>
  <p><label>Couleur <input type="color" name="couleur" value="#ff6347"></label></p>
  <p><label>Volume <input type="range" name="volume" min="0" max="100"></label></p>

<p><label><input type="checkbox" name="newsletter"> Recevoir la newsletter</label></p>

<p>Livraison :
    <label><input type="radio" name="livraison" value="domicile" checked> Domicile</label>
    <label><input type="radio" name="livraison" value="relais"> Point relais</label>
  </p>

<p><label>Pays
    <select name="pays">
      <option value="fr">France</option>
      <option value="be">Belgique</option>
      <option value="ch">Suisse</option>
    </select>
  </label></p>

<p><label>Message<br><textarea name="message" rows="3" cols="30"></textarea></label></p>
  <button>Envoyer</button>
</form>

Radio vs checkbox Des boutons radio qui ont le même name forment un groupe : un seul choix possible. Les checkbox sont indépendantes.

Autre façon de lier un label : mettre le champ dans le label (comme ci-dessus). Plus besoin de for/id.

Validation automatique

Quelques attributs et le navigateur vérifie tout seul. Essaie d'envoyer le formulaire vide, puis avec un email invalide :

Attribut	Effet
`required`	Champ obligatoire
`minlength` / `maxlength`	Longueur du texte
`min` / `max`	Valeurs limites (nombres, dates)
`placeholder`	Texte d'exemple grisé (≠ label !)

Pourquoi toujours associer un <label> à un champ ?

C'est obligatoire, sinon le formulaire ne marche pas
Pour l'accessibilité et pour agrandir la zone cliquable
Pour que la donnée soit envoyée

Le lecteur d'écran annonce le label quand le champ est sélectionné, et cliquer sur le texte active le champ. C'est name qui sert à l'envoi.

À toi de jouer

Formulaire d'inscription

Un champ pseudo (texte, obligatoire, name="pseudo").
Un champ email (type email, obligatoire, name="email").
Un champ âge (nombre, minimum 12, name="age").
Chaque champ a un label associé.
Une case à cocher obligatoire « J'accepte les conditions ».
Un bouton d'envoi.

Indice

Chaque champ = un <label> + un <input>. Le type change selon la donnée : text, email, number, checkbox.

Indice

Pour relier un label à son champ : for du label = id du champ. Champ obligatoire : attribut required. Âge minimum : min="12".

Indice

Le premier champ, les autres suivent le même modèle :

<label for="pseudo">Pseudo</label>
<input type="text" id="pseudo" name="pseudo" required>

<label><input type="checkbox" required> J'accepte les conditions</label>
<button>S'inscrire</button>

Choisis ta taille

Crée un groupe de 3 boutons radio S, M, L (name="taille", valeurs s, m, l). « M » est coché par défaut. Chaque bouton a son label.

Indice

Un bouton radio s’écrit <input type="radio">. Ceux qui ont le même name forment un groupe : un seul choix possible.

Indice

Chaque bouton a sa value (s, m, l). L’attribut checked coche un bouton par défaut.

Indice

Le bouton M ; fais pareil pour S (avant) et L (après), sans checked :

<label><input type="radio" name="taille" value="m" checked> M</label>

À retenir

form englobe les champs ; button l'envoie.
Chaque champ : un label + un name.
Le type change le champ : email, number, date, checkbox, radio…
required, min, minlength… : validation gratuite.

Formulaires

Le trio form · label · input

for ↔ id

name

<button>

Plein de types de champs

Validation automatique

À toi de jouer

Formulaire d'inscription

Choisis ta taille

À retenir

Le trio `form` · `label` · `input`

`for` ↔ `id`

`name`

`<button>`