Ingénierie du Web
Majdoulayne HANIFI
2021 - 2022
Les formulaires
Introduction
Toute page HTML, peut être enrichie de formulaires interactifs, qui invitent les
visiteurs à renseigner des informations : saisir du texte, sélectionner des options,
valider avec un bouton…
Nous arrivons cependant aux limites du langage HTML car il faut ensuite
pouvoir analyser les informations que le visiteur a saisies et cela doit
s’effectuer dans un autre langage :PHP
Un formulaire est un moyen d'interagir avec un serveur.
Il est généralement composé des champs de saisie, des cases à cocher
ou des sélections.
2
Les formulaires
Introduction
Les informations saisies seront ensuite envoyées vers le serveur qui va les traiter,
et dans certains cas rendre une réponse à l'internaute.
Les différents traitements possibles sont :
envoi du contenu du formulaire par courrier électronique,
traitement du contenu du formulaire par un script côté serveur (PHP), par
exemple pour insérer les données dans une base de données.
Les formulaires servent à véhiculer les informations saisies par
l'utilisateur généralement via le protocole HTTP.
3
Les formulaires
Introduction
Voici un exemple de formulaire qui permet d'envoyer des informations au
serveur.
Il s'agit du nom, prénom, adresse et de la discipline sportive choisie par l'adhérent.
4
Les formulaires
Déclaration d’un formulaire
Avant de pouvoir utiliser les différentes sortes de formulaires (ligne de texte,
liste déroulante, cases à cocher...), il faut déclarer au serveur qu'il devra
gérer des formulaires et ce qu'il devra en faire.
La définition des différents éléments du formulaire se fait en
utilisant les éléments : form, method et action.
<FORM method="post" action="URL d'expédition" > ... les
formulaires proprement dit ...
</FORM>
L'attribut "method" indique par quel moyen les données vont être
envoyées.
Il existe deux solutions pour envoyer les données sur le web :
Method=’ get’:c’est une méthode en général assez peu adaptée car elle
est limitée à 255 caractères. La particularité vient du fait que les
informations seront envoyées dans l’adresse de la page ([Link]
Method=‘post’: c’est la méthode la plus utilisée pour les formulaires car elle
permet d’envoyer un grand nombre d’informations. Les données ne
transitent pas par la barre d’adresse. 5
Les formulaires
Déclaration d’un formulaire
L'attribut "action" spécifie l'adresse d'expédition des données :
1. Dan s le cas d'un traitement des données par une CGI (Common Gateway
Interface), on spécifie le répertoire CGI du serveur et le nom de la CGI.
CGI est un programme en C ou C++ qui est chargé sur le disque dur du
serveur et qui traite les données pour préparer une réponse immédiate
<FORM method="post" action="[Link]
2. Dan s le cas d'un envoi vers une adresse électronique (e-mail), on utilise le
protocole mailto: suivi de l'adresse électronique de destinataire (généralement
l’adresse e-mail).
<FORM method="post" action="[Link]
(sans espace entre mailto: et l'adresse e-mail !) 6
Les formulaires
Les éléments du formulaires
Les éléments de formulaires sont répartis en 3 classes :
Input
Champs de saisie de texte et différents types de boutons
Select
Listes (menus déroulants et ascenseurs)
Textarea
Zone de saisie de texte libre
7
Les formulaires
Les éléments du formulaire
1. Ligne de texte
INPUT type="text"
indique un champ de saisie d'une seule ligne. C'est assurément le formulaire le
plus simple à mettre en oeuvre :
<FORM>
<INPUT type="text" name="nom" size="50"> </FORM>
L'attribut name="nom de l’élément du formulaire" est quasiment
obligatoire car on n'utilise que rarement un seul élément.
8
Les formulaires
Les éléments du formulaire
NAME sert à donner un nom à chaque champ :
Il n’apparaît pas à l’affichage
Il est utile pour le traitement des données par le programme qui recevra les
données.
Il n’est pas nécessaire de spécifier un nom de champ pour les types “submit” et
“reset”.
NAME sert à regrouper des boutons “radio”
N’utilisez pas le même name pour plusieurs “checkbox”
9
Les formulaires
Les éléments du formulaire
<FORM>
<INPUT type="text" name="nom" size="50"> </FORM>
L'attribut size (optionnel) définit la longueur du champ de saisie.
Il existe l'attribut maxlength="x" (optionnel) qui limite le nombre réel de
caractères que l'on peut introduire dans le champ de saisie.
La balise <INPUT> n'a pas de balise de fin.
10
Les formulaires
Les éléments du formulaire
2. Zone de saisie :
La balise <TEXTAREA></TEXTAREA> introduit une zone de texte multilignes
et non plus une simple ligne de texte.
La syntaxe est :
<FORM>
<TEXTAREA name="nom" rows=4 cols=40>Valeur par défaut</TEXTAREA>
</FORM>
L'attribut name permet de donner un nom à la zone de saisie du formulaire.
L'attribut rows=x détermine le nombre de lignes de la zone de texte.
L'attribut cols=y détermine le nombre le nombre de colonnes.
La balise <TEXTAREA> a une balise de fin, soit </TEXTAREA>.
11
Les formulaires
Les éléments du formulaire
3. Liste déroulante :
La balise <SELECT></SELECT> indique au serveur l'usage d'une liste déroulante.
Les éléments de la liste sont introduits par la balise <OPTION> ...
(</OPTION> facultatif).
<FORM>
<SELECT name=”JourSemaine" size="1">
<OPTION>lundi
<OPTION>mardi
<OPTION>mercredi
<OPTION>jeudi
<OPTION>vendredi
</SELECT>
</FORM>
12
Les formulaires
Les éléments du formulaire
Si vous cliquez sur la petite flèche vers le bas, vous obtiendrez la liste
déroulante où on retrouve les éléments de la liste (<OPTION>).
L'attribut name="nom" définit le nom de la liste du formulaire.
L'attribut size="x" détermine le nombre d'éléments de liste affiché dans la boite
d'entrée.
En fait, size="1" est optionnel car "1" est la valeur par défaut. Le même exemple
avec size="3" donne :
13
Les formulaires
Les éléments du formulaire
Exemple 1 :
Pays<select name=”pays” size="1">
<option>CH: Suisse
<option>D: Allemagne
<option>F: France
<option>US: Etats-Unis
<option>A: Autriche
<option>I: Italie </select> 14
Les formulaires
Les éléments du formulaire
Exemple 2 :
<select name="pays" size="6">
<option>CH: Suisse
<option>D: Allemagne
<option>F: France
<option>US: Etats-Unis
<option>A: Autriche
<option>I: Italie
</select>
15
Les formulaires
Les éléments du formulaire
On peut présélectionner l'élément affiché dans la boite d'entrée (par
défaut, le premier élément de la liste sera retenu).
On utilise pour ce faire l'attribut selected de la balise <OPTION>. Pour faire
afficher d'entrée mercredi au lieu de lundi notre exemple devient :
<FORM>
<SELECT name=”JourSemaine" size="1">
<OPTION>lundi
<OPTION>mardi
<OPTION selected>mercredi
<OPTION>jeudi
<OPTION>vendredi
</SELECT>
</FORM>
La balise <SELECT> a une balise de fin </SELECT> tandis que le balise de
fin < / OPTION> est facultative. 16
Les formulaires
Les éléments du formulaire
4. Bouton d'option :
Il serait plus logique de parler de boutons d'option car ils n'ont de sens que
s'ils sont plusieurs. Ainsi on parle d'un groupe de boutons d'options.
Les boutons d'option, aussi appelés boutons radio, ont comme particularité
qu'une seule option à la fois peut être activée.
La syntaxe de base est :
<FORM>
<INPUT type="radio" name="nom du groupe" value="valeur du bouton">
</FORM>
17
Les formulaires
Les éléments du formulaire
Ainsi, si on propose un choix entre le tarif de jour ou le tarif de nuit ou le tarif
de week-end, l'exemple devient
<FORM>
<INPUT type= "radio" name="tarif" value="jour"> tarif de jour
<INPUT type= "radio" name="tarif" value="nuit"> tarif de nuit
<INPUT type= "radio" name="tarif" value="week-end"> tarif de week-end
</FORM>
Il est clair que l'attribut name="nom" doit avoir le même nom pour tout le
groupe de boutons d'option.
L'attribut "checked" (optionnel) permet de présélectionner un bouton radio.
Ainsi <INPUT type= "radio" name="tarif" value="jour" checked> tarif de
jour. présenterait le bouton radio "tarif de jour" en position présélectionnée.
18
Les formulaires
Les éléments du formulaire
Le contenu de l'attribut "value" du bouton retenu sera renvoyé par mailto ou
utilisé par le CGI.
il définit la valeur transmise par le formulaire pour le bouton sélectionné.
5. Case à cocher :
La philosophie des cases à cocher [checkbox] est assez similaire aux boites
d'option.
Ici, cependant, plusieurs choix simultanés peuvent être réalisés.
permet d’enfoncer les boutons par défaut.
La syntaxe de base est :
<FORM>
<INPUT type="checkbox" name="nom" value="valeur attachée au bouton">
</FORM> 19
Les formulaires
Les éléments du formulaire
Exemple :
<FORM>
<INPUT type="checkbox" name="choix1" value="1"> glace vanille
<INPUT type="checkbox" name="choix2" value="2"> chantilly
<INPUT type="checkbox" name="choix3" value="3"> chocolat chaud
<INPUT type="checkbox" name="choix4" value="4"> biscuit
</FORM>
20
Les formulaires
Les éléments du formulaire
Les règles pour l'attribut name="nom" sont moins précises que pour les
boutons d'option.
On doit employer des noms différents pour chaque case à cocher.
L'attribut checked (optionnel) permet de présélectionner une case à cocher.
Ainsi <INPUT type="checkbox" name="choix1" value="1" checked > glace
vanille présenterait la case à cocher "glace vanille" en position présélectionnée.
Le contenu de l'attribut "value" du ou des boutons retenus seront
renvoyés par mailto ou utilisé par le CGI.
La balise <INPUT> n'a pas de balise de fin.
21
Les formulaires
Les éléments du formulaire
6. Bouton de commande :
la syntaxe est la suivante :
<FORM>
<INPUT type="button" name="nom" value="texte du bouton"
onclick="fonction Javascript">
</FORM>
Voyons un petit exemple.
<FORM>
<INPUT type="button" name="nom" value= "Bouton de test"
onclick="alert('Test réussi !')"> </FORM>
En cliquant sur le bouton "Bouton de test", on va déclencher une fonction Javascript
élémentaire qui consiste à afficher une petite boite (dite d'alerte) avec le texte
"Test réussi!".
22
Les formulaires
Les éléments du formulaire
Les formulaires
Les éléments du formulaire
7. Submit :
Le bouton Submit a la tâche spécifique de transmettre toutes les
informations contenues dans le formulaire à l'URL désignée dans les
attributs ACTION et M E T H O D de la balise <FORM>.
la syntaxe Html est :
<FORM>
<INPUT TYPE="submit" NAME="nom" VALUE="texte du bouton">
</FORM>
Soit par exemple :
<FORM>
<INPUT TYPE="submit" NAME="nom" VALUE=" Envoyer ">
</FORM>
24
Les formulaires
Les éléments du formulaire
8. Reset :
Le bouton Reset permet d'annuler les modifications apportées aux contrôles
d'un formulaire et de restaurer les valeurs par défaut.
la syntaxe Html est :
<FORM>
<INPUT TYPE="reset" NAME="nom" VALUE="texte du bouton">
</FORM>
Exemple :
<FORM>
<INPUT TYPE="reset" NAME="nom" VALUE=" Annuler ">
</FORM>
25
Les formulaires
L’attribut "VALUE"
VALUE permet de spécifier les valeurs des réponses:
Pour les lignes de texte value définit la valeur par défaut (si nécessaire)
Pour les types radio et checkbox, il définit la valeur transmise par le formulaire
pour le bouton sélectionné.
Pour les types “submit”, “reset” et "button", la valeur du paramètre value
correspond au texte affiché sur le bouton.
Exemple :
Nom de famille:<input type=”text” name=”nom_de_famille” value=”Dupuis”>
Documentation :<input type="checkbox" name=”doc” value=”doc_souhaitee”>
<input type=”submit” value=”enregistrer”>
26
Les formulaires
L’attribut "CHECKED"
CHECKED permet d’enfoncer les boutons par défaut.
Ne prends pas de valeur.
S’applique qu’aux types “checkbox” et “radio”.
Exemple :
<input type="checkbox" name="age" value=”mineur”> Vous êtes mineur <br>
<input type="checkbox" name="age" CHECKED value=”adulte”> Vous êtes
adulte
Sexe: <INPUT TYPE="radio" NAME="sexe" CHECKED>Masculin
<INPUT TYPE="radio" NAME="sexe">Féminin
27
Les formulaires
L’attribut "SIZE"
SIZE spécifie la largeur d’un champs.
<INPUT TYPE=”text” NAME=”nom” SIZE=”10” VALUE=”100”>
MAXLENGTH détermine le nombre maximum de caractères pouvant être saisis
pour une question ouverte.
Si ce paramètre ne figure pas dans la déclaration d’input, le nombre de
caractères possibles est infini.
<input type=”text” name=”commentaire” maxlength=50>
28
Les formulaires
Exemple :
Donner le code HTML qui correspond à ce
formulaire
NB : le formulaire sera adressé à votre adresse e-
mail.
29
Les formulaires
Réponse :
<FORM method="post" action="[Link]
mail">
Votre nom :<BR>
<INPUT type="text" name="nom"><BR> Votre adresse :<BR>
<TEXTAREA name="adresse" ROWS=2 COLS=35>
</TEXTAREA><BR>
<INPUT type="submit" value="Envoyer">
<INPUT type="reset" value="Annuler">
</FORM>
30
Les formulaires
L’élément Fieldset
Lorsqu'un formulaire contient des groupes de champs liés, il faut les
encadrer par les balises <fieldset> et </fieldset> et utiliser l'élément legend pour
décrire le groupe de champs.
Le but de cette directive est d'augmenter la qualité sémantique des formulaires.
Cela permet aux utilisateurs de mieux comprendre le lien entre les champs et
donc d'interagir de manière plus efficace et rapide avec le formulaire.
Pour regrouper les champs de formulaire, encadrez les groupes de champs par les
balises <fieldset> et </fieldset> et utilisez l'élément legend pour donner à
chaque groupe une description claire
31
Les formulaires
L’élément Fieldset
Exemple :
SI les labels des champs 'jour', 'mois, et 'année' sont lus hors contexte, on sait qu'il
s'agit d'une date, mais pas de laquelle. C'est pourquoi il est utile d'ajouter un fieldset
avec legend: Date de naissance
32
Les formulaires
L’élément Fieldset
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
</head>
<body>
<FORM method="post">
<fieldset>
<legend>Date de naissance</legend>
Jour <select name="jour" size="1">
<option>1</option>
<option>2</option>
<option>3</option>
</select> 33
Les formulaires
L’élément Fieldset
Mois <select name="mois" size="1">
<option>janvier</option>
<option>février</option>
<option>mars</option>
</select>
Année <select name="an">
<option>1980</option>
<option>1981</option>
<option>1982</option>
</select>
</fieldset>
</FORM>
</body>
</html>
34
Les formulaires
Exercice :
Les questions à choix multiples ont les mêmes réponses possibles.
Il faut donc les placer dans un fieldset pour faire le lien avec la
question correspondante.
Il en va de même pour les informations personnelles qui sont répétées
deux fois dans le formulaire:
35
Les formulaires
Ecrire le code HTML qui affiche le formulaire ci-
dessous :
36