Regrouper et préciser les choix
Objectif : Organiser les options d’inscription pour que leur signification soit explicite.
Un formulaire peut contenir plusieurs choix qui n’ont pas la même logique : sélectionner une formule, indiquer une préférence ou accepter une option facultative. Si ces contrôles sont présentés sans contexte, vous risquez de ne pas comprendre à quelle question ils répondent, même si chaque champ possède un libellé.
Dans cette leçon, vous allez distinguer les choix exclusifs des choix cumulables et les réunir sous un intitulé commun. Les associations label-champ et les contraintes natives du formulaire ont déjà été étudiées ; vous les conservez ici pour que les nouvelles options restent compréhensibles et utilisables.
Donner un contexte à un groupe de contrôles
fieldset regroupe des champs qui répondent à une même question ou relèvent d’un même sujet. Son élément legend fournit le titre du groupe : il indique le contexte avant que la personne ne parcoure les contrôles. Par exemple, vous pouvez placer la préférence de contact dans un groupe intitulé « Préférence de contact ».
Le titre du groupe ne remplace pas les libellés individuels. Chaque bouton ou case garde donc son propre label, associé à son id. Cette distinction évite de demander à la personne de deviner ce que signifie chaque option à partir du seul titre du groupe.
Choisir entre radio, case à cocher et liste déroulante
Utilisez des boutons radio lorsque la personne doit retenir une seule option parmi plusieurs. Les options d’une même question partagent le même attribut name, tandis que chaque bouton a un id distinct et son propre libellé. La sélection d’un bouton désélectionne les autres du groupe ; l’attribut value indique la valeur transmise pour l’option choisie.
Une case à cocher convient à une option indépendante, que la personne peut activer ou laisser décochée. Plusieurs cases peuvent être cochées en même temps. Si la réponse est obligatoire, ajoutez required à la case concernée ; ne l’ajoutez pas simplement parce que le formulaire contient déjà d’autres champs obligatoires.
Une liste déroulante, construite avec select et des éléments option, convient à une sélection unique lorsque les choix sont regroupés dans un contrôle compact. La première option peut servir d’invite avec une valeur vide. Si le champ est required, cette valeur vide empêche de valider le formulaire sans véritable choix ; les autres options fournissent les valeurs attendues.
Intégrer les choix à la réservation
Dans la page ci-dessous, la liste « Formule » conserve les deux formules déjà prévues pour l’atelier. Un groupe de boutons radio recueille une préférence de contact unique ; une case à cocher reste facultative et porte sur l’envoi des prochaines dates. Ces deux demandes sont distinctes : elles ont donc des noms différents et sont présentées dans des groupes séparés.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Réservation de l’atelier</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="atelier-page">
<header class="atelier-entete">
<p>Atelier créatif</p>
<nav class="atelier-navigation" aria-label="Navigation principale">
<ul>
<li><a href="#presentation">Présentation</a></li>
<li><a href="#inscription">Inscription</a></li>
<li><a href="#tarifs">Tarifs</a></li>
</ul>
</nav>
</header>
<main class="atelier-principal">
<section class="atelier-presentation" id="presentation" aria-labelledby="titre-atelier">
<h1 id="titre-atelier">Réservez votre place à l’atelier</h1>
<article class="atelier-article">
<h2>À propos de l’atelier</h2>
<p>Participez à une séance guidée et repartez avec votre création.</p>
<p>Durée : deux heures. Les places sont limitées.</p>
</article>
</section>
<section class="atelier-inscription" id="inscription" aria-labelledby="titre-inscription">
<h2 id="titre-inscription">Formulaire d’inscription</h2>
<form class="atelier-formulaire" action="#" method="post">
<div class="atelier-champ">
<label for="nom">Nom complet</label>
<input id="nom" name="nom" type="text" autocomplete="name" minlength="2" required>
</div>
<div class="atelier-champ">
<label for="courriel">Adresse courriel</label>
<input id="courriel" name="courriel" type="email" autocomplete="email" required>
</div>
<div class="atelier-champ">
<label for="telephone">Téléphone</label>
<input id="telephone" name="telephone" type="tel" autocomplete="tel" pattern="[0-9 +()-]{8,20}" required>
</div>
<div class="atelier-champ">
<label for="date">Date souhaitée</label>
<input id="date" name="date" type="date" required>
</div>
<div class="atelier-champ">
<label for="participants">Nombre de participants</label>
<input id="participants" name="participants" type="number" min="1" max="8" step="1" value="1" required>
</div>
<fieldset>
<legend>Formule de l’atelier</legend>
<div class="atelier-champ">
<label for="formule">Choisissez une formule</label>
<select id="formule" name="formule" required>
<option value="">Choisissez une formule</option>
<option value="decouverte">Découverte</option>
<option value="complete">Complète</option>
</select>
</div>
</fieldset>
<fieldset>
<legend>Préférence de contact</legend>
<div class="atelier-champ">
<input id="contact-courriel" name="contact" type="radio" value="courriel" checked>
<label for="contact-courriel">Par courriel</label>
</div>
<div class="atelier-champ">
<input id="contact-telephone" name="contact" type="radio" value="telephone">
<label for="contact-telephone">Par téléphone</label>
</div>
</fieldset>
<div class="atelier-champ">
<input id="actualites" name="actualites" type="checkbox" value="oui">
<label for="actualites">Recevoir les prochaines dates de l’atelier</label>
</div>
<button class="atelier-bouton" type="submit">Envoyer la réservation</button>
</form>
</section>
<section class="atelier-tarifs" id="tarifs" aria-labelledby="titre-tarifs">
<h2 id="titre-tarifs">Tarifs des formules</h2>
<table class="atelier-tableau">
<caption>Tarifs par participant, en euros</caption>
<thead>
<tr>
<th scope="col">Formule</th>
<th scope="col">Durée</th>
<th scope="col">Tarif</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Découverte</th>
<td>Deux heures</td>
<td>35 €</td>
</tr>
<tr>
<th scope="row">Complète</th>
<td>Trois heures</td>
<td>50 €</td>
</tr>
</tbody>
</table>
</section>
</main>
<footer class="atelier-pied">
<p>Atelier créatif — Informations et réservations</p>
</footer>
</body>
</html>Le résultat est un formulaire dans lequel chaque choix annonce clairement sa portée : la formule est obligatoire, la préférence de contact est unique et l’inscription aux prochaines dates est facultative. Comme les deux boutons radio partagent name="contact", une seule préférence peut être retenue. La case actualites ne bloque pas l’envoi lorsqu’elle reste décochée.
À retenir
- Réunissez les contrôles qui répondent à la même question avec fieldset et donnez-leur un contexte avec legend.
- Choisissez les boutons radio pour une seule réponse parmi plusieurs options ; donnez-leur un name commun.
- Choisissez les cases à cocher pour des options indépendantes qui peuvent être cumulées ou laissées décochées.
- Utilisez select et option pour une liste de choix unique, avec une option d’invite vide si le champ est obligatoire.
- Conservez un libellé visible pour chaque contrôle et une valeur distincte et pertinente pour chaque réponse.
La prochaine étape consiste à assembler la page de réservation et à vérifier que sa structure complète respecte le contrat du projet.