Ajouter des contraintes natives
Objectif : Empêcher les saisies incomplètes ou hors limites avec les attributs HTML appropriés.
Une réservation incomplète ou comportant un nombre de participants impossible crée des erreurs de traitement. Vous pouvez déjà choisir un type de champ adapté aux données demandées ; cette leçon ajoute des règles directement dans le HTML pour empêcher certaines erreurs avant l’envoi.
Ces contrôles ne remplacent pas les libellés visibles associés aux champs, vus précédemment : ils précisent quelles valeurs le navigateur accepte. Vous allez utiliser des attributs HTML natifs, sans script, sur le formulaire de réservation de l’atelier.
Rendre certains champs obligatoires
Ajoutez l’attribut required à un contrôle pour interdire l’envoi tant qu’il n’a pas été renseigné. Il convient ici au nom, au courriel, au téléphone et à la date souhaitée : ces informations sont nécessaires pour traiter la demande. Pour un champ texte, une chaîne vide n’est pas acceptée ; pour une liste de choix, l’option initiale dont la valeur est vide ne constitue pas une sélection valide.
L’attribut ne garantit pas que l’information fournie est exacte, ni qu’elle correspond à une réservation réellement disponible. Il indique au navigateur qu’une valeur est requise et déclenche sa validation lors de la soumission. Les champs qui ont déjà une valeur par défaut ou dont la sélection est préremplie peuvent suivre un autre besoin métier ; choisissez donc les champs obligatoires en fonction des informations indispensables à votre processus.
Définir des limites et un pas de saisie
Sur un champ number, min fixe la valeur numérique minimale et max la valeur maximale. Pour le nombre de participants, la plage de 1 à 8 correspond à la capacité annoncée dans le formulaire : une valeur inférieure ou supérieure est refusée lors de la validation. step précise l’incrément permis ; avec step="1", le champ accepte des nombres entiers et écarte, par exemple, 2,5 participants.
Pour le nom, minlength="2" impose au moins deux caractères. Cette règle évite une saisie trop courte, mais ne vérifie pas que le nom est réel. Pour le téléphone, le code conserve une expression dans pattern : elle limite les caractères aux chiffres, espaces, signes plus, parenthèses et tirets, avec une longueur comprise entre 8 et 20 caractères. Présentez cette contrainte comme un contrôle de format, pas comme une vérification universelle des numéros de téléphone.
Page de réservation avec contraintes natives
Voici le fichier complet index.html à l’état de cette leçon. Les champs conservent leurs libellés, leurs identifiants et leurs noms ; les nouvelles contraintes sont ajoutées aux contrôles concernés. La structure de page et le tableau restent ceux du projet fil rouge.
<!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>
<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>Ouvrez le fichier dans un navigateur et essayez de soumettre le formulaire en laissant un champ obligatoire vide, en saisissant un seul caractère pour le nom, puis en indiquant 9 participants. Le navigateur bloque chaque soumission invalide et signale le contrôle à corriger ; un courriel mal formé ou un téléphone qui ne correspond pas au motif déclenche également une erreur. Avec une saisie conforme, la validation native laisse le formulaire être soumis selon son attribut action et sa méthode.
Les messages affichés et les commandes de sélection peuvent varier selon le navigateur et la langue de l’appareil. Vous n’avez pas besoin d’écrire un message personnalisé pour obtenir ce premier contrôle : les attributs décrivent les contraintes que le navigateur sait appliquer. Les limites doivent toutefois rester cohérentes avec le fonctionnement réel de l’atelier, et non être ajoutées uniquement pour multiplier les règles.
À retenir
- Utilisez required pour empêcher l’envoi d’un champ indispensable laissé vide.
- Appliquez minlength et pattern aux champs texte quand une longueur minimale ou un format précis est pertinent.
- Combinez min, max et step pour borner une valeur numérique et définir ses incréments autorisés.
- La validation native aide à corriger la saisie dans le navigateur, mais ne remplace pas la vérification côté serveur.
Dans la prochaine leçon, vous regrouperez les choix du formulaire et préciserez leur organisation avec les éléments adaptés.