Formulaires
Présentation
Les formulaires sont utilisés par les sites Web pour recueillir des informations de l'utilisateur. Ils permettent à l'utilisateur d'envoyer des données au site web. La plupart du temps, ces données sont envoyées à des serveurs web.
Un formulaire est formé par un ou plusieurs composants. Parmi ceux-ci on cite :
- les champs de texte :
- les listes déroulantes :
- les boutons :
- les case à cocher : Je veux :
- les boutons radio : Je suis :
Exemple 1 : Login
On désire créer le formulaire suivant :
Le code HTML correspondant est comme suit :
<form id="example01" action="#" method="post">
<input type="text" name="login" placeholder="Login">
<input type="password" name="pass" placeholder="Password" autocomplete="new-password">
<label><input type="checkbox" name="rememberme" checked="true"> Remember me</label>
<button>Log me in</button>
</form>Le code CSS correspondant est disponible ici : code CSS du formulaire de login.
Exploration du code
On remarque que ce formulaire :
- commence par la balise
<form>et se termine par</form>. - contient un champ de texte (text field) :
<input type="text" name="login" placeholder="Login"> - contient un champ de mot de passe (password field) :
<input type="password" name="pass" placeholder="Password" autocomplete="new-password"> - contient une case à cocher (checkbox) :
<input type="checkbox" name="rememberme" checked="true"> - contient une étiquette (label) :
<label><input ...> Remember me</label> - contient un bouton de soumission (submit button) :
<button>Log me in</button>
Travail demandé
- Créer un fichier HTML nommé : login.html
- Copier le code HTML du formulaire, ci-dessus.
- Ajouter la mise en forme CSS disponible à travers le lien hypertexte, précédent.
Balise form
Le formulaire est délimité par
<form action="..." method="...">...</form>.
Cette balise admet deux attributs principaux :
action="..."indique l'URL qui traite les données récupérées provenant du formulaire.method="..."indique la méthode HTTP qui sera utilisée pour envoyer les données au serveur.Les méthodes HTTP usuelles sont :
- GET : les données sont ajoutées à l'adresse URL indiquée dans action, elles sont visibles à l'utilisateur.
- POST : les données sont envoyées dans le corps de la requête, donc invisibles à l'utilisateur.
Exemple 2 : méthodes GET et HTTP
On va comparer les deux méthodes HTTP (GET et POST) à l'aide des formulaires suivants.
Méthode POST
Ouvrir l'outil de développement F12 du navigateur sur l'onglet réseau. Puis, cliquer sur le bouton Login du formulaire qui utilise la méthode POST.
Méthode GET
Utiliser le lien "return to course..." pour retourner à la page des formulaires. Puis, cliquer sur le bouton login du formulaire qui utilise la méthode GET.
Composants standards
| Composant / Forme | Code HTML |
|---|---|
|
Bouton radio (radio button) |
|
|
Case à cocher (checkbox) |
|
|
Champ de texte (text field) |
|
|
Zone de texte (text area) |
|
|
Champ de mot de passe (password field) |
|
|
Champ nombre (number field) |
|
|
Champ email (email field) |
|
|
Champ téléphone (tel field) |
|
|
Champ date (date field) |
|
|
Champ heure (time field) |
|
|
Champ date et heure (datetime field) |
|
|
Champ intervalle (range field) |
|
|
Liste déroulante |
|
|
Liste à choix multiples |
|
|
Boutons (buttons) |
|
|
Regroupement de champs (fieldset & legend) |
|
|
Attributs d'état (disabled & readonly) |
|
Structure complète d'un tableau HTML (<caption> et <tfoot>)
En plus de <thead> (en-tête) et <tbody> (corps), un tableau HTML peut comporter une légende descriptive avec <caption> et un pied de tableau récapitulatif avec <tfoot> (idéal pour les totaux et bilans) :
| Article | Qté | Prix U. | Total |
|---|---|---|---|
| Clavier USB | 2 | 25 DT | 50 DT |
| Souris optique | 3 | 15 DT | 45 DT |
| Total général | 95 DT | ||
<table border="1">
<caption>Facture récapitulative</caption>
<thead>
<tr><th>Article</th><th>Qté</th><th>Prix U.</th><th>Total</th></tr>
</thead>
<tbody>
<tr><td>Clavier USB</td><td>2</td><td>25 DT</td><td>50 DT</td></tr>
<tr><td>Souris optique</td><td>3</td><td>15 DT</td><td>45 DT</td></tr>
</tbody>
<tfoot>
<tr><th colspan="3">Total général</th><th>95 DT</th></tr>
</tfoot>
</table>Application 7 : Formulaire de contact
Créer le formulaire de contact suivant :
Les champs obligatoires sont suivis par un astérisque (*).
Les postes actuels disponibles sont :
- Web
- Frontend developer
- Backend developer
- Fullstack developer
- Data science
- Datascience engineer
- Autres
- Python developer
- C++ developer
Utiliser le CSS pour mettre en forme le formulaire.
Application 8 : Personnages de bandes dessinées
Réaliser un formulaire de personnages de bandes dessinées composé de cinq questions.
Question 1
- Les images des personnages sont des étiquettes (labels) qui permettent de sélectionner la zone de liste en dessous de chaque image.
- Les éléments de la zone de liste sont montrés dans la figure suivante :
- L'utilisateur doit obligatoirement remplir chacune des listes.
Question 2
- Les images des personnages sont des étiquettes (labels) qui permettent de sélectionner le bouton radio au dessus de chaque image.
- La valeur respective de chaque bouton radio est : a, b et c.
- L'utilisateur doit obligatoirement choisir une réponse parmi les trois propositions.
Question 3
- Le champ de texte est lié à une
datalistqui contient les valeurs suivantes :- Spiderman
- Superman
- Batman
- Megaman
- Catman
- L'utilisateur doit obligatoirement répondre à cette question.
Question 4
- Les images des personnages sont des étiquettes (labels) qui permettent de sélectionner la case à cocher (checkbox) en dessous de chaque image.
- La valeur respective de chaque bouton radio est : a, b, c et d.
- La réponse n'est pas obligatoire à cette question.
Question 5
- Le champ affiché est de type numérique (number).
- Les valeurs acceptées dans ce champ sont comprises entre 1 et 20. Le champ affiche la valeur 5, par défaut.
- La réponse à cette question est obligatoire.
Le formulaire fournit deux boutons : submit et reset