Va au-delà des champs de base et apprends à construire des formulaires riches et interactifs avec des listes déroulantes, boutons radio, cases à cocher, sélecteurs de date et attributs de validation.
L'élément <select> crée une liste déroulante qui permet aux utilisateurs de choisir une (ou plusieurs) options. Chaque choix se trouve dans un élément <option>.
Attributs clés :
name sur <select> — identifie le champ lors de la soumission du formulaire.value sur <option> — la valeur envoyée au serveur. Si omise, le contenu texte est utilisé.selected sur <option> — pré-sélectionne cette option.multiple sur <select> — permet de sélectionner plus d'une option (maintiens Ctrl/Cmd).Tu peux regrouper des options liées avec <optgroup label="Nom du groupe"> pour une meilleure organisation dans les longues listes.
<!-- Dropdown select -->
<label for="country">Country:</label>
<select id="country" name="country">
<option value="">-- Choose --</option>
<option value="us">United States</option>
<option value="fr">France</option>
<option value="jp">Japan</option>
</select>
<!-- Radio buttons — same name = one choice only -->
<fieldset>
<legend>Preferred contact method</legend>
<label><input type="radio" name="contact" value="email"> Email</label>
<label><input type="radio" name="contact" value="phone"> Phone</label>
<label><input type="radio" name="contact" value="mail"> Mail</label>
</fieldset>
<!-- Checkboxes — independent toggles -->
<fieldset>
<legend>Interests</legend>
<label><input type="checkbox" name="interests" value="music"> Music</label>
<label><input type="checkbox" name="interests" value="sports"> Sports</label>
<label><input type="checkbox" name="interests" value="coding"> Coding</label>
</fieldset><fieldset> dessine une boîte visuelle autour d'un groupe de contrôles de formulaire liés, et <legend> fournit une légende pour ce groupe. Ce n'est pas qu'une question d'esthétique — c'est essentiel pour l'accessibilité. Les lecteurs d'écran annoncent le texte de la légende avant chaque contrôle à l'intérieur du fieldset, donnant du contexte aux utilisateurs.
<datalist> fournit des suggestions d'autocomplétion pour un champ de texte. Tu les relies en définissant l'attribut list du champ sur l'id de la datalist :
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
</datalist>L'utilisateur peut toujours saisir une valeur personnalisée — la datalist est purement suggestive, pas restrictive.
HTML5 a introduit de nombreux types d'input spécialisés qui fournissent des widgets d'interface et de validation intégrés :
| Type | Objectif |
|---|---|
date | Sélecteur de date calendrier |
time | Sélecteur d'heure |
range | Contrôle curseur |
color | Sélecteur de couleur |
number | Sélecteur numérique |
email | Email avec validation de base |
url | URL avec validation de base |
tel | Téléphone (les claviers mobiles s'adaptent) |
Les attributs de validation te permettent d'imposer des règles sans JavaScript :
required — le champ doit être rempli.min / max — limites numériques ou de date.minlength / maxlength — limites de longueur de texte.pattern — une expression régulière que la valeur doit correspondre.step — incrément pour les champs number/range.Quand un formulaire est soumis et que la validation échoue, le navigateur affiche une info-bulle d'erreur native et bloque la soumission.
Quelle est la différence clé entre les boutons radio et les cases à cocher ?