Lycée Technique de Taza
Brevet de technicien supérieur (BTS) en
Multimédia et Conception Web (MCW)
Module: développement multimédia
Année universitaire : 2021/2022
Dr: hicham zaaraoui
Chapitre 6
Gestion des formulaires
19/01/2022 2
I. Introduction
Les formulaires constituent le principal moyen pour vos visiteurs d'entrer des
informations sur votre site. Ils constituent donc l’élément essentiel qui permet
l’interactivité entre un site et ses visiteurs.
Tout échange entre visiteur et serveur passe par un formulaire, dans lequel
l’utilisateur peut saisir textes ou mots de passe, opérer des choix grâce à des boutons
radio, des cases à cocher ou des listes de sélection, voire envoyer ses propres fichiers
depuis le poste client.
Le langage HTML ne peut pas analyser les informations que le visiteur a saisies dans
un formulaire. Alors, le traitement des résultats doit s'effectuer dans un autre langage,
par exemple le PHP.
19/01/2022 3
II. Création d’un formulaire HTML
1. Structure d’un formulaire HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
</head>
<body>
<form method="POST" action="<?=$_SERVER['PHP_SELF']?>">
<fieldset><legend>Titre du formulaire</legend>
<!--Corps du formulaire-->
</fieldset>
</form>
</body>
</html>
19/01/2022 4
II. Création d’un formulaire HTML
2. Attributs de l’élément <form>
❖ action="nom_de_fichier.php"
• nom_de_fichier.php est le fichier qui va traiter, sur le serveur, les informations
saisies dans le formulaire, Il est recommandé que ce fichier soit présent dans le
même répertoire que celui contenant le formulaire, mais ce n’est pas obligatoire
• Si le fichier (nom_de_fichier.php) se trouve dans un autre dossier, voire sur un
autre serveur, il faut mentionner le chemin d’accès (une adresse). Par exemple :
action= "http://www.abcphp.com/dossier/nom_de_fichier.php"
• Si le fichier qui traite les données est celui qui contient le formulaire vous
pouvez utiliser les syntaxes suivants:
1) action="<?=$_SERVER['PHP_SELF']?>"
2) action="#"
3) action=" "
19/01/2022 5
II. Création d’un formulaire HTML
• L’attribut action peut aussi avoir la valeur "mailto:", qui provoque l’envoi des
données vers une adresse e-mail, qu’il faut préciser à la suite du mot mailto en
écrivant, par exemple : action="mailto: [email protected]"
❖ method="POST|GET"
• La méthode d’envoi des données vers le serveur.
• La méthode GET est la méthode par défaut et présente deux inconvénients:
1) L’ajout des données du formulaire à l’adresse URL du fichier qui les traite,
ce qui les rend visibles par le visiteur.
2) Il existe une limite à la longueur des URL.
• Ces problèmes ne se retrouvent pas avec la valeur POST, que vous utiliserez
dans la plupart des cas.
19/01/2022 6
II. Création d’un formulaire HTML
❖ name="chaine_de_caractères"
• Attribue un nom au formulaire. Cet attribut est surtout utilisé pour accéder
aux éléments du formulaire via un script JavaScript.
❖ enctype="type_d’encodage"
• C’est le type d’encodage des données transmises au serveur. Sa valeur par
défaut vaut : "application/x-www-form-urlencoded"
• Pour le transfert de fichiers du poste client vers le serveur, on doit utiliser la
valeur "multipart/form-data".
Remarque:
Si l’attribut action a la valeur "mailto:", l’attribut enctype a pour valeur "text/plain" ou
"text/html", selon que le contenu est envoyé à une adresse e-mail au format texte ou
XHTML.
19/01/2022 7
II. Création d’un formulaire HTML
3. L’élément <fieldset>
• Permet de créer des blocs visuels contenus entre les balises <fieldset> et
</fieldset> et donc d’améliorer la présentation.
4. L’élément <legend>
• Contient le titre de chacun de des blocs.
19/01/2022 8
II. Création d’un formulaire HTML
Exercice: formulaire
Ecrire le code d’un formulaire contenant les éléments suivants :
1) Saisie des données personnelles du visiteur et zones de texte « nom », « prenom »
et « mail » (repères 1, 2 et 3 ), champ de saisie de mot de passe (repère 4), boutons
radio (repère 5) et de sélection (repère 6) à quatre options.
2) Cases à cocher (repère 7) et zone de texte multiligne (repère 8).
3) Envoi d’un fichier du client vers le serveur (repère 9), champ caché contenant la
taille maximale des fichiers transférables et boutons de réinitialisation (repère 10)
et d’envoi (repère 11).
19/01/2022 9
19/01/2022 10
III. Récupération des données du formulaire
1. valeurs uniques
❑ Les valeurs uniques proviennent des champs de formulaire dans lesquels
l’utilisateur ne peut entrer qu’une valeur, un texte par exemple, ou ne peut faire
qu’un seul choix (bouton radio, liste de sélection à choix unique).
❑ Selon la méthode choisie, ces valeurs sont contenues sur le serveur dans des
tableaux associatifs $_POST et $_GET. Les clés de ces tableaux sont les noms
associés aux champs par l’attribut name.
19/01/2022 11
III. Récupération des données du formulaire
❖ Cas de la méthode POST:
Exemple: Récupération des valeurs dans un formulaire élémentaire
1) Ecrire un code HTML qui permet d’avoir la formulaire de la figure ci-contre ?
2) Ecrire un code PHP qui permet de récupérer le résultat dans le même fichier ?
19/01/2022 12
III. Récupération des données du formulaire
❖ Cas de la méthode GET:
Dans l’exemple précèdent, on remplace la méthode POST par la méthode GET.
Adresse URL obtenue :
http://localhost/Formulaire/form2.php?Nom=Fréderic+&Prenom=Juan+may&niveau=Initié&envoyer=envoyer
Remarque:
Lors du clic sur le bouton d’envoi l’adresse de la page cible désignée par l’attribut
action est suivie par le caractère ? puis par le nom de chaque champ et la valeur qui y
est associée.
19/01/2022 13
III. Récupération des données du formulaire
2. Les valeurs multiples
Cela concerne un groupe de cases à cocher ayant le même attribut name ou une liste
de sélection ayant toujours un nom unique mais dans laquelle l’attribut
multiple="multiple" est défini.
Exemple:
Bleu : <input type="checkbox" name="choix[]" value="bleu" />
Rouge: <input type="checkbox" name="choix[]" value="rouge" />
Pour récupérer ces valeurs on utilise:
$_POST["choix"][0] qui contient la valeur bleu.
$_POST["choix"][1] qui contient la valeur rouge.
19/01/2022 14
IV. Maintien de l’état du formulaire
❑ Après le traitement, le formulaire se retrouve alors dans son état initial, et toutes les
saisies effectuées sont effacées.
❑ En cas d’erreur de saisie sur un seul champ, l’utilisateur est obligé de recommencer
l’ensemble de la saisie.
Pour éviter cela,
❑ Pour le texte, il suffit de définir l’attribut value avec la variable $_POST["nom"]
value="<?php if(isset($_POST["nom"])) echo $_POST["nom"]?>"
❑ Pour les boutons radio, il faut définir l’attribut checked du bouton choisi à la valeur
"checked" en fonction de la valeur de la variable $_POST["niveau"] :
<?php if(isset($_POST["niveau"]) &&
$_POST["niveau"]=="Débutant") echo "checked=\"checked\""
?>
19/01/2022 15
IV. Maintien de l’état du formulaire
Exercice:
Soit un site d’annonces immobilières proposant un plan de financement aux visiteurs.
Créer un formulaire permettant de calculer le prêt bancaire ?
❑ Le Montant correspond au capital emprunté.
❑ Le Taux désigne le taux mensuel sous forme décimale. Par exemple, si l’utilisateur saisit 6
pour le taux annuel, la variable $taux vaut 6/100/12, soit 0,005, ou 0,5 % par mois.
19/01/2022 16
IV. Maintien de l’état du formulaire
❑ La Durée en année qui sera convertie en mois pour calculer la mensualité.
❑ L’Assurance a la valeur 1 puisque le bouton radio « OUI » est coché par défaut. La
variable $assur renvoie au montant de l’assurance mensuelle, soit 0,035 % du capital
emprunté. Cette variable prend la valeur 0 si le bouton radio « NON » est coché.
❑ la Mensualité est calculée selon la formule financière suivante:
𝑐𝑎𝑝𝑖𝑡𝑎𝑙 × 𝑡𝑎𝑢𝑥
𝑚𝑒𝑛𝑠 =
1 − 1 + 𝑡𝑎𝑢𝑥 −𝑑𝑢𝑟𝑒𝑒
19/01/2022 17
TP : Formulaire
Exercice 1
Créez un formulaire comprenant un groupe de champs ayant pour titre "Adresse
client". Le groupe doit permettre la saisie du nom, du prénom, de l’adresse, de la ville
et du code postal. Les données sont ensuite traitées par un fichier PHP séparé
récupérant les données et les affichant dans un tableau.
Exercice 2
Améliorez le script précédent en vérifiant l’existence des données et en affichant une
boîte d’alerte JavaScript si l’une des données est manquante.
19/01/2022 19
TP : Formulaire
Exercice 3
Créez un formulaire de saisie d’adresse e-mail contenant un champ caché destiné à
récupérer le type du navigateur de l’utilisateur. Le code PHP affiche l’adresse et le
nom du navigateur dans la même page après vérification de l’existence des données.
Exercice 4
Créez un formulaire demandant la saisie d’un prix HT et d’un taux de TVA. Le script
affiche le montant de la TVA et le prix TTC dans deux zones de texte créées
dynamiquement. Le formulaire maintient les données saisies.
19/01/2022 20
V. Transfert de fichier vers le serveur
<input type="file" />
❑ Il ne s’agit plus de transmettre une ou plusieurs valeurs scalaires au serveur mais
l’intégralité d’un fichier, lequel peut avoir une taille importante et un type
quelconque. Ce fichier doit évidemment être présent sur l’ordinateur du visiteur.
Remarque :
Problème de sécurité pour votre site, car les fichiers vont être écrits et éventuellement
exécutés sur le serveur.
Exemple :
Un utilisateur mal intentionné transfère un fichier nommé index.php ou index.html
sur le serveur.
19/01/2022 21
V. Transfert de fichier vers le serveur
Solution :
➢ Vérifier l’extension du fichier préalablement à la définition des extensions autorisées
lors de la création du formulaire.
➢ Utilisez l’attribut accept de l’élément <input />
➢ L’élément <form> doit avoir l’attribut method à la valeur POST et l’attribut
enctype à la valeur multipart/form-data.
Précautions supplémentaires:
➢ Limiter la taille des fichiers à télécharger en ajoutant un champ caché nommé
MAX_FILE_SIZE, dont l’attribut value contienne la taille maximale admise en octet
(récupérée dans $_POST["MAX_FILE_SIZE"]).
<input type="hidden" name="MAX_FILE_SIZE" value="1000000"/>
19/01/2022 22
V. Transfert de fichier vers le serveur
➢ L’utilisation de ce champ n’est pas obligatoire puisque le fichier php.ini du serveur
contient la directive "upload_max_filesize", dont la valeur est un entier indiquant la
taille maximale en octet admise par défaut par le serveur. En local avec
Wampserver, cette valeur est de 2 Mo.
❑ Une fois le fichier sélectionné, un clic sur le bouton Submit provoque l’envoi du
fichier au serveur et son traitement par un script, que vous devez encore écrire.
❑ Le fichier est bien transféré sur le serveur, mais il se trouve dans un répertoire
tampon défini par la directive "upload_tmp_dir" du fichier php.ini. Si vous n’en
faites rien, il est perdu lors de la déconnexion du client.
❑ Le nom du fichier sur le poste client est différent de celui qu’il est enregistré sur le
serveur, puisque celui-ci est créé arbitrairement par le serveur.
19/01/2022 23
V. Transfert de fichier vers le serveur
❑ Pour récupérer les informations nécessaires au traitement du fichier transféré. Il
faut utiliser les tableaux associatifs multidimensionnels $_FILES.
<input type="file" name="fich" accept=".doc" />
• $_FILES["fich"]["name"]contient le nom qu’avait le fichier sur le poste client.
• $_FILES["fich"]["type"]contient le type MIME initial du fichier.
• $_FILES["fich"]["size"]donne la taille réelle en octet du fichier transféré.
• $_FILES["fich"]["tmp_name"]donne le nom temporaire que le serveur
attribue automatiquement au fichier en l’enregistrant dans le répertoire tampon.
19/01/2022 24
V. Transfert de fichier vers le serveur
• $_FILES["fich"]["error"] donne le code d’erreur éventuel associé au fichier
téléchargé et permet d’afficher un message d’erreur en clair en créant un tableau
indicé de 0 à 4 contenant les messages appropriés.
UPLOAD_ERR_OK:0 indique que le transfert est bien réalisé.
UPLOAD_ERR_INI_SIZE:1 indique que la taille du fichier est supérieure à celle
définie dans la php.ini
UPLOAD_ERR_FORM_SIZE:2 indique que la taille est supérieure à celle définie
dans le champ caché MAX_FILE_SIZE.
UPLOAD_ERR_PARTIAL:3 indique que le fichier n’a été que partiellement
téléchargé.
UPLOAD_ERR_NO_FILE:4 indique qu’aucun fichier n’a été téléchargé.
19/01/2022 25
V. Transfert de fichier vers le serveur
❑ En dernier lieu, vous devez procéder à l’enregistrement et au renommage éventuel
du fichier sur le serveur.
boolean move_uploaded_file(string "fichtmp", string "fichfinal")
Exercice 5
Créez un formulaire n’effectuant que le transfert de fichiers pdf et d’une taille limitée
à 1 Mo. Le script affiche le nom du fichier du poste client ainsi que la taille du fichier
transféré et la confirmation de réception.
19/01/2022 26
VI. Transfert de plusieurs fichiers vers le serveur
Il est possible de proposer à l’utilisateur de transférer plusieurs fichiers
simultanément. Dans ce cas, l’éléments <input type="file"…/> soient tous écrits de la
manière suivante :
<input type="file" name="fich[]"accept="image/gif" />
Exemple :
Ecrire un script qui permet d’avoir les informations liées aux deux fichiers téléchargées
à partir du poste client?
19/01/2022 27
