Intégrer et tester le formulaire
Objectif : Vérifier chaque champ de réservation, son libellé et le comportement des contraintes natives du navigateur.
Un formulaire peut sembler prêt alors qu’une réservation incomplète ou mal formatée reste possible. Vous allez parcourir les champs de la page, vérifier les libellés et tester les contraintes directement dans le navigateur, sans écrire de JavaScript. Cette vérification s’appuie sur les types et attributs déjà étudiés dans les leçons précédentes.
Préparer une série de tests
Ouvrez index.html dans un navigateur et placez-vous dans le formulaire. Pour chaque contrôle, repérez son libellé visible, la donnée attendue et la règle qui peut empêcher l’envoi. Les associations entre label, for et id sont déjà en place ; reportez-vous à la leçon « Associer chaque champ à un libellé » pour leur principe.
Commencez par tenter d’envoyer le formulaire sans rien saisir. Le navigateur doit signaler le premier champ obligatoire manquant et déplacer le focus vers ce contrôle. Le navigateur peut afficher un message différent selon sa langue et son environnement : l’important est que l’envoi soit bloqué tant que les contraintes ne sont pas respectées.
Tester les champs et les limites
Pour le nom, essayez une seule lettre : la contrainte minlength="2" doit empêcher l’envoi. Saisissez ensuite un nom d’au moins deux caractères. Pour le courriel, entrez une valeur sans structure d’adresse, par exemple lea@ ; le type email doit déclencher une erreur. Remplacez-la par une adresse complète pour poursuivre.
Testez ensuite le téléphone avec des lettres, puis avec une valeur composée de chiffres et, si nécessaire, d’espaces ou de signes autorisés par le motif. Une valeur contenant des lettres ne doit pas satisfaire le pattern. Le champ de date doit accepter une date au format pris en charge par le navigateur ; le contrôle de calendrier facilite la saisie, mais la date reste obligatoire.
Pour le nombre de participants, vérifiez les bornes : une valeur inférieure à 1 ou supérieure à 8 doit être refusée. Le contrôle number peut permettre une saisie manuelle, mais ses commandes d’incrémentation dépendent du navigateur. Vérifiez aussi que la formule est sélectionnée : l’option initiale a une valeur vide, donc elle ne constitue pas un choix valide pour ce champ obligatoire.
Les groupes de préférences restent à tester séparément : chaque bouton radio doit proposer un choix exclusif dans son groupe, tandis que plusieurs cases à cocher peuvent être sélectionnées indépendamment. Vérifiez que leurs textes visibles permettent d’identifier chaque option et que les champs associés au formulaire conservent leur nom et leur valeur. Le balisage complet ci-dessous comprend ces choix ainsi que le tableau déjà intégré.
<!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" value="1" required>
</div>
<fieldset>
<legend>Préférences de séance</legend>
<div class="atelier-champ">
<input id="seance-matin" name="seance" type="radio" value="matin" required>
<label for="seance-matin">Le matin</label>
</div>
<div class="atelier-champ">
<input id="seance-apres-midi" name="seance" type="radio" value="apres-midi">
<label for="seance-apres-midi">L’après-midi</label>
</div>
<div class="atelier-champ">
<input id="materiel" name="materiel" type="checkbox" value="oui">
<label for="materiel">J’apporte mon matériel</label>
</div>
</fieldset>
<div class="atelier-champ">
<label for="formule">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>
<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>Dans le code, le groupe radio possède un même attribut name et des valeurs distinctes ; un seul choix peut donc être retenu. Le choix « J’apporte mon matériel » est indépendant et n’est pas obligatoire. Le formulaire n’ajoute pas d’attribut novalidate : les contrôles du navigateur restent actifs. Pour cet exercice, action="#" sert de destination de démonstration ; il ne remplace pas un traitement réel des réservations.
À retenir
- Testez chaque champ vide puis avec une valeur invalide et une valeur valide.
- Vérifiez les limites numériques, la longueur minimale, le format du téléphone et la sélection de la formule.
- Les contraintes natives bloquent l’envoi tant que les règles HTML ne sont pas satisfaites.
- Chaque contrôle doit conserver un libellé visible et une association correcte avec son identifiant.
- Les tests du navigateur confirment le comportement du balisage, mais ne remplacent pas un traitement serveur des réservations.
La leçon suivante vous permettra d’effectuer la revue finale des liens, du document et des associations entre libellés et champs.