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 (http://...)
 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="http://www.serveur/cgi-bin/ma_cgi.pl">

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="mailto:Vanlancker.Luc@ccim.be">

(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="mailto:votre_adresse_E-

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