Le formulaire papier de la poste
Des cases à remplir, des cases à cocher, un seul choix possible entre « lettre » et « colis », et l'agent refuse le formulaire si l'adresse manque. Un formulaire HTML fait exactement pareil.
M04 · B. Implémenter une page web statique
Intégrer des formulaires
Construire un formulaire avec ses champs de saisie, ses cases à cocher, boutons radio et listes, et utiliser la validation automatique de HTML5.
1Situer
Le guide de Chefchaouen veut recevoir des demandes de réservation : nom, e-mail, téléphone, date, nombre de personnes, choix du circuit et un message. Sans contrôle, il reçoit des e-mails sans @, des dates vides, des téléphones à 3 chiffres. HTML5 sait vérifier tout cela avant même l'envoi.
2Comprendre
Le formulaire a trois champs : nom (required), e-mail (type=email, required) et date (type=date, required).
1 / 5
Un formulaire permet au visiteur d’envoyer des informations. Il est délimité par la balise <form> :
<form action="/reservation" method="post">
...les champs...
<button type="submit">Réserver</button>
</form>
action: l’adresse qui recevra les données (un programme côté serveur, vu plus tard en PHP ou Node.js) ;method:get(données dans l’adresse) oupost(données dans le corps de la requête).
Chaque champ a un name : c’est le nom sous lequel la valeur sera envoyée.
Les champs de saisie
| Balise | Usage |
|---|---|
<input type="text"> | texte court |
<input type="password"> | mot de passe masqué |
<textarea> | texte long |
<input type="radio"> | un seul choix (même name) |
<input type="checkbox"> | plusieurs choix |
<select> + <option> | liste déroulante |
<button type="submit"> | bouton d’envoi |
<button type="reset"> | remise à zéro |
Chaque champ est accompagné d’un <label for="id"> : un clic sur le texte active le champ, et les lecteurs d’écran l’annoncent.
Les nouveautés HTML5
Des types spécialisés, qui affichent le bon clavier sur mobile : email, tel, url, number, date, time, color, range, search.
La validation automatique
Le navigateur vérifie le formulaire avant l’envoi :
| Attribut | Règle |
|---|---|
required | champ obligatoire |
type="email" | doit contenir un @ et un domaine |
min, max, step | bornes d’un nombre ou d’une date |
minlength, maxlength | longueur du texte |
pattern="..." | format décrit par une expression régulière |
En CSS, les pseudo-classes :valid et :invalid permettent de colorer les champs. Attention : cette validation aide l’utilisateur, mais le serveur doit toujours vérifier à nouveau les données.
Le champ obligatoire
L'attribut required empêche l'envoi tant que le champ est vide, et type="email" vérifie la présence d'un @.
<label for="mail">E-mail</label> <input type="email" id="mail" name="mail" required>
Publicité
3Manipuler
Testez le formulaire : cliquez sur « Réserver » sans rien remplir, puis avec un e-mail sans @. Ensuite, complétez-le avec les consignes ci-dessous.
- Ajoutez un champ date (type="date") obligatoire
- Ajoutez un champ nombre de personnes entre 1 et 12 (min et max)
- Ajoutez une liste <select> de langues (au moins 3 <option>)
- Ajoutez une case à cocher pour accepter les conditions
- Ajoutez une zone de message <textarea>
4Pratiquer
Exercice 1 · Le téléphone marocain
Ajoutez un champ téléphone qui n'accepte que 10 chiffres commençant par 06 ou 07, avec un exemple affiché dans le champ.
Voir un indice
L'attribut pattern accepte une expression régulière ; placeholder affiche un exemple.
Voir le corrigé
<label for="tel">Téléphone</label>
<input type="tel" id="tel" name="tel"
pattern="0[67][0-9]{8}" placeholder="0612345678" required>
Exercice 2 · Radio ou case à cocher ?
Pour chaque question, choisissez radio, checkbox ou select : (1) le sexe ; (2) les options du séjour (repas, transport, guide) ; (3) la ville de départ parmi 30 villes.
Voir le corrigé
1. radio : un seul choix parmi peu d'options 2. checkbox : plusieurs choix possibles 3. select : un choix parmi une longue liste
Exercice 3 · GET ou POST ?
Quelle méthode utiliser pour (1) un formulaire de recherche ; (2) un formulaire d'inscription avec mot de passe ? Pourquoi ?
Voir le corrigé
1. GET : les données vont dans l'adresse (?q=chaouen), on peut copier le lien de la recherche. 2. POST : les données sont dans le corps de la requête, elles n'apparaissent pas dans l'adresse ni l'historique.
Publicité