Choisir le type de champ adapté
Objectif : Sélectionner les types de champs correspondant aux données demandées à l’inscription.
Un formulaire peut afficher un libellé compréhensible tout en demandant une saisie peu adaptée : un nombre de participants dans un champ texte, par exemple, laisse davantage de place aux erreurs. Dans cette leçon, vous allez choisir un type de champ qui correspond à chaque donnée recueillie pour la réservation de l’atelier.
La leçon précédente a établi l’association entre chaque champ et son libellé visible. Vous allez maintenant ajuster le type et le nom des contrôles sans modifier ces associations ni la structure du projet. Le type influe sur la saisie proposée par le navigateur et, selon le type choisi, sur les vérifications de format disponibles.
Choisir un type adapté à la donnée
Utilisez type="text" pour une information composée principalement de caractères, comme le nom complet. Ce type convient aussi à des données qui ressemblent à des nombres, mais qui ne servent pas à calculer : un code postal ou un numéro d’identification, par exemple. Un numéro de téléphone n’est pas une quantité à additionner ; le type tel signale plutôt qu’il s’agit d’un numéro de téléphone.
Pour une adresse électronique, choisissez type="email". Le navigateur peut alors proposer un clavier adapté sur certains appareils et repérer une adresse qui ne respecte pas la forme attendue. Pour une date, type="date" donne généralement accès à un sélecteur de date ; son apparence varie selon le navigateur et l’appareil.
Pour une valeur numérique destinée à être interprétée comme un nombre, telle que le nombre de participants, choisissez type="number". Le contrôle présente souvent des commandes permettant d’augmenter ou de diminuer la valeur. Le type ne remplace pas une explication du champ : gardez un libellé précis, par exemple « Nombre de participants » plutôt que « Nombre ».
Nommer les données avec name
L’attribut name donne un nom à la donnée du contrôle lorsque le formulaire est envoyé. Il ne remplace pas id : l’identifiant sert notamment à retrouver le contrôle depuis son libellé, tandis que name nomme la valeur transmise. Choisissez un nom court et stable, comme courriel ou participants, et veillez à ne pas le confondre avec le texte affiché à l’écran.
Mettre à jour le formulaire
Dans la page de réservation, le nom complet appelle un champ texte, le courriel un champ email, le téléphone un champ tel, la date souhaitée un champ date et le nombre de participants un champ number. La formule reste une liste de choix ; vous conserverez son contrôle existant sans chercher à le remplacer par un type d’input. Voici le fichier complet index.html avec ces types et les attributs name correspondants.
<!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">
</div>
<div class="atelier-champ">
<label for="courriel">Adresse courriel</label>
<input id="courriel" name="courriel" type="email" autocomplete="email">
</div>
<div class="atelier-champ">
<label for="telephone">Téléphone</label>
<input id="telephone" name="telephone" type="tel" autocomplete="tel">
</div>
<div class="atelier-champ">
<label for="date">Date souhaitée</label>
<input id="date" name="date" type="date">
</div>
<div class="atelier-champ">
<label for="participants">Nombre de participants</label>
<input id="participants" name="participants" type="number" value="1">
</div>
<div class="atelier-champ">
<label for="formule">Formule</label>
<select id="formule" name="formule">
<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>Le fichier conserve les identifiants utilisés par les libellés et les noms des données destinées à l’envoi. Aucun changement n’est requis dans style.css pour choisir ces types. À ce stade, le formulaire indique la nature des champs, mais n’impose pas encore les contraintes de saisie qui seront ajoutées dans la leçon suivante.
À retenir
- Choisissez text pour le nom, email pour le courriel, tel pour le téléphone, date pour une date et number pour une quantité numérique.
- L’attribut name nomme la donnée envoyée ; il ne remplace pas l’id associé au libellé.
- Le type choisi adapte la saisie et peut fournir des aides ou vérifications de format, sans garantir à lui seul que la donnée est correcte.
- Conservez des libellés explicites et vérifiez que chaque contrôle garde son association avec le libellé.
Dans la leçon suivante, vous ajouterez des contraintes natives pour préciser les saisies acceptées par le navigateur.