Pr. Aissam MESRARPr. Aissam MESRAR 11
Chapitre 3
Les Formulaires en PHP
Pr. Aissam MESRAR
Pr. Aissam MESRARPr. Aissam MESRAR 22
PlanPlan
IntroductionIntroduction Eléments de base du langage PHPEléments de base du langage PHP FonctionsFonctions TableauxTableaux FormulairesFormulaires PHP et MySQLPHP et MySQL CookiesCookies SessionsSessions Expressions régulièresExpressions régulières
Pr. Aissam MESRARPr. Aissam MESRAR 33
Traitement des Traitement des FormulairesFormulaires
Pr. Aissam MESRARPr. Aissam MESRAR 44
Formulaire : RappelFormulaire : Rappel
ObjectifsObjectifs
Permettre l’interaction avec l’utilisateurPermettre l’interaction avec l’utilisateur
Personnaliser les requêtes sur le webPersonnaliser les requêtes sur le web
Permettre d’accéder aux BDs sans savoir Permettre d’accéder aux BDs sans savoir
manipuler les SGBDsmanipuler les SGBDs
……
Pr. Aissam MESRARPr. Aissam MESRAR 55
Formulaire : RappelFormulaire : Rappel
Comment utiliser un formulaire ?Comment utiliser un formulaire ?
Réalisation du formulaire (Simple)Réalisation du formulaire (Simple)
En HTMLEn HTML
Exploitation du formulaire par un scriptExploitation du formulaire par un script CGICGI PHPPHP JSPJSP ASPASP ……
Envoi du formulaire par e-mailEnvoi du formulaire par e-mail
Pr. Aissam MESRARPr. Aissam MESRAR 66
FormulairesFormulaires
Un formulaire est inséré dans une page HTML Un formulaire est inséré dans une page HTML
par la balise double <FORM>par la balise double <FORM>
En plus de ses éléments principaux, le En plus de ses éléments principaux, le
formulaire peut contenir du texteformulaire peut contenir du texte
Toutes les mises en forme peuvent être Toutes les mises en forme peuvent être
appliquées aux éléments du formulaireappliquées aux éléments du formulaire
Plusieurs formulaires peuvent être insérés Plusieurs formulaires peuvent être insérés
dans la même page dans la même page
Pr. Aissam MESRARPr. Aissam MESRAR 77
FormulairesFormulaires
Principaux attributs d’un formulairePrincipaux attributs d’un formulaire<FORM <FORM ACTIONACTION="script" ="script" METHODMETHOD="post" ="post" NAMENAME
="nom_form">="nom_form">
ACTIONACTION: URL du script ou prog à exécuter : URL du script ou prog à exécuter Chemin du script à exécuter sur les données du formulaireChemin du script à exécuter sur les données du formulaire
ACTION= "chemin_script" ACTION= "chemin_script" Adresse mail à laquelle les données du formulaire seront Adresse mail à laquelle les données du formulaire seront
envoyésenvoyés ACTION="mailto : ACTION="mailto : [email protected]" "
Pr. Aissam MESRARPr. Aissam MESRAR 88
FormulairesFormulaires
Principaux attributs d’un formulairePrincipaux attributs d’un formulaire<FORM <FORM ACTIONACTION="script" ="script" METHODMETHOD="post" ="post"
NAMENAME ="nom_form">="nom_form">
METHODMETHOD: méthode d’envoi des données : méthode d’envoi des données GETGET ou ou POSTPOST GET : données du form envoyées avec l’URL du GET : données du form envoyées avec l’URL du
script (limitée)script (limitée) POST: données du form envoyées séparément de POST: données du form envoyées séparément de
l’URL (meilleure)l’URL (meilleure)
NAMENAME : nom du formulaire: nom du formulaire
Pr. Aissam MESRARPr. Aissam MESRAR 99
Formulaires Formulaires Balise <INPUT>Balise <INPUT>
<INPUT> : crée une zone de saisie <INPUT> : crée une zone de saisie Balise monolithiqueBalise monolithique
Principaux attributsPrincipaux attributs NAMENAME: nom du champ: nom du champ SIZESIZE : largeur du cadre réservé au champ: largeur du cadre réservé au champ MAXLENTH: longueur du texteMAXLENTH: longueur du texte TYPETYPE : : ((text, password, radio, checkbox, submit, reset, text, password, radio, checkbox, submit, reset,
file, …file, …)) VALUEVALUE : La valeur du champ: La valeur du champ
Pr. Aissam MESRARPr. Aissam MESRAR 1010
Formulaires Formulaires Saisie des champs de texteSaisie des champs de texte
Zone de saisie du texteZone de saisie du texte ExempleExempleVotre nom : <INPUT NAME="nom" SIZE=15 MAXLENGTH=30> <BR> Votre nom : <INPUT NAME="nom" SIZE=15 MAXLENGTH=30> <BR>
<BR> <BR><BR> <BR>
Votre prénom : <INPUT NAME="prenom" SIZE=15 MAXLENGTH=30>Votre prénom : <INPUT NAME="prenom" SIZE=15 MAXLENGTH=30>
Pr. Aissam MESRARPr. Aissam MESRAR 1111
Formulaires Formulaires Envoi du formulaireEnvoi du formulaire
Pour envoyer le formulaire, il suffit de cliquer avec la souris Pour envoyer le formulaire, il suffit de cliquer avec la souris sur un bouton spécial créé par la balise <INPUT> sur un bouton spécial créé par la balise <INPUT>
<INPUT TYPE="submit" VALUE="Valider"><INPUT TYPE="submit" VALUE="Valider"> La valeur "submit" de l’attribut TYPE caractérise le bouton La valeur "submit" de l’attribut TYPE caractérise le bouton
d’envoid’envoi La valeur "Valider" de l’attribut VA LUE définit le texte affiché sur La valeur "Valider" de l’attribut VA LUE définit le texte affiché sur
le bouton d’envoile bouton d’envoi
ExempleExemple
Pr. Aissam MESRARPr. Aissam MESRAR 1212
Formulaires Formulaires Données envoyéesDonnées envoyées
Seuls sont envoyés les noms des champs et Seuls sont envoyés les noms des champs et les valeurs correspondantesles valeurs correspondantes ExempleExemple
nom=Alinom=Ali&&prenom=Mohamedprenom=Mohamed++AmineAmine
Deux champs successifs sont séparés par le Deux champs successifs sont séparés par le caractère caractère &&
L’espace est remplacé par le caractère L’espace est remplacé par le caractère + + dans la dans la valeur d’un champsvaleur d’un champs
Pr. Aissam MESRARPr. Aissam MESRAR 1313
Formulaires Formulaires Modification du formulaireModification du formulaire
Après avoir rempli les données du formulaire, nous pouvons les Après avoir rempli les données du formulaire, nous pouvons les effacer tous avec un bouton créé par la balise <INPUT> effacer tous avec un bouton créé par la balise <INPUT> Avant l’envoi du formulaireAvant l’envoi du formulaire
<INPUT TYPE="reset" VALUE="Effacer"><INPUT TYPE="reset" VALUE="Effacer"> La valeur "reset" de l’attribut TYPE caractérise le bouton de La valeur "reset" de l’attribut TYPE caractérise le bouton de
modificationmodification La valeur " Effacer" de l’attribut VA LUE définit le texte affiché sur La valeur " Effacer" de l’attribut VA LUE définit le texte affiché sur
le bouton d’envoile bouton d’envoi
Exemple
Pr. Aissam MESRARPr. Aissam MESRAR 1414
Formulaires Formulaires Saisie d’un mot de passeSaisie d’un mot de passe
L’attribut TYPE avec la valeur "password" permet de L’attribut TYPE avec la valeur "password" permet de masquer un champs lors de la saisie, ses caractères masquer un champs lors de la saisie, ses caractères sont remplacés par des points ou des étoilessont remplacés par des points ou des étoiles
<INPUT <INPUT TYPE ="password"TYPE ="password" NAME="passwd" SIZE=15 NAME="passwd" SIZE=15 MAXLENGTH=30>MAXLENGTH=30>
ExempleExemple
Pr. Aissam MESRARPr. Aissam MESRAR 1515
Formulaires Formulaires Boutons radioBoutons radio
Notation Notation <INPUT TYPE ="radio" NAME ="nom_radio" VALUE="valeur1"> texte <INPUT TYPE ="radio" NAME ="nom_radio" VALUE="valeur1"> texte du bouton1 du bouton1 <INPUT TYPE ="radio" NAME =" nom_radio" VALUE="valeur2"> texte <INPUT TYPE ="radio" NAME =" nom_radio" VALUE="valeur2"> texte du bouton2du bouton2
La valeur de l’attribut NAME est commune à tous les boutonsLa valeur de l’attribut NAME est commune à tous les boutons
Pr. Aissam MESRARPr. Aissam MESRAR 1616
Formulaires Formulaires Boutons radioBoutons radio
Sélectionner un élément dans une listeSélectionner un élément dans une liste Cocher avec la sourisCocher avec la souris
Une deuxième sélection annule la premièreUne deuxième sélection annule la première Choix exclusifChoix exclusif
ExempleExemple
Texte envoyé au script :
nom=Ali&prenom=Mohamed+Amine&sexe=H
Pr. Aissam MESRARPr. Aissam MESRAR 1717
Formulaires Formulaires Boutons radioBoutons radio
L’attribut CHECKED permet de cocher par L’attribut CHECKED permet de cocher par défaut l’un des boutonsdéfaut l’un des boutons<INPUT TYPE ="radio" NAME ="nom_radio" VALUE="valeur1" CHECKED> texte du <INPUT TYPE ="radio" NAME ="nom_radio" VALUE="valeur1" CHECKED> texte du bouton1 bouton1
<INPUT TYPE ="radio" NAME =" nom_radio" VALUE="valeur2"> texte du bouton2<INPUT TYPE ="radio" NAME =" nom_radio" VALUE="valeur2"> texte du bouton2
ExempleExemple
Pr. Aissam MESRARPr. Aissam MESRAR 1818
Formulaires Formulaires Cases à cocherCases à cocher
Notation :Notation :
<INPUT TYPE ="<INPUT TYPE ="checkboxcheckbox" NAME ="nom_cases" VALUE="valeur1"> texte case1" NAME ="nom_cases" VALUE="valeur1"> texte case1
<INPUT TYPE ="<INPUT TYPE ="checkboxcheckbox" NAME ="nom_cases" VALUE=" valeur2"> texte case2" NAME ="nom_cases" VALUE=" valeur2"> texte case2
<INPUT TYPE ="<INPUT TYPE ="checkboxcheckbox" NAME =" nom_cases" VALUE=" valeur3"> texte case3" NAME =" nom_cases" VALUE=" valeur3"> texte case3
Pr. Aissam MESRARPr. Aissam MESRAR 1919
Formulaires Formulaires Cases à cocherCases à cocher
Sélectionner un élément Sélectionner un élément
dans une listedans une liste Cocher avec la sourisCocher avec la souris
Possibilité de cocher Possibilité de cocher
plusieurs élémentsplusieurs éléments
Un clique sélectionne Un clique sélectionne
l’élément l’élément
le 2 ème clique annule la le 2 ème clique annule la
sélectionsélection
ExempleExemple
Pr. Aissam MESRARPr. Aissam MESRAR 2020
Formulaires Formulaires Cases à cocherCases à cocher
Possibilité de cocher Possibilité de cocher
une ou plusieurs une ou plusieurs
cases par défaut cases par défaut
avec l’attribut avec l’attribut
CHECKEDCHECKED
ExempleExemple
Pr. Aissam MESRARPr. Aissam MESRAR 2121
Formulaires Formulaires Menu déroulantMenu déroulant
Balise double <SELECT>Balise double <SELECT>
Principaux attributs : NAME, SIZE, MULTIPLEPrincipaux attributs : NAME, SIZE, MULTIPLE
Sélectionner un élément dans un menuSélectionner un élément dans un menu
Sélection avec la sourisSélection avec la souris
Pr. Aissam MESRARPr. Aissam MESRAR 2222
Formulaires Formulaires Menu déroulants Menu déroulants
Exemple
Ville(s) visités :
<SELECT NAME="ville" >
<OPTION VALUE="RA"> Rabat
<OPTION VALUE="FE"> Fès
<OPTION VALUE="MA"> Marrakech
<OPTION VALUE="AG"> Agadir
<OPTION VALUE="TA"> Tanger
</SELECT>
Pr. Aissam MESRARPr. Aissam MESRAR 2323
Formulaires Formulaires Menu déroulantMenu déroulant
SIZE : indique le nombre de Lignes visibles du SIZE : indique le nombre de Lignes visibles du
menumenu Si SIZE < nb d’éléments du menu alors une barre de Si SIZE < nb d’éléments du menu alors une barre de
défilement apparaît défilement apparaît
Exemple Exemple
Pr. Aissam MESRARPr. Aissam MESRAR 2424
Formulaires Formulaires Menu déroulantMenu déroulant
Possibilité de sélectionner plusieurs élémentsPossibilité de sélectionner plusieurs éléments Le nom de l’élément doit être suivi de : []Le nom de l’élément doit être suivi de : []
Attribut : MULTIPLEAttribut : MULTIPLE
Exemple Exemple
Pr. Aissam MESRARPr. Aissam MESRAR 2525
Formulaires Formulaires Menu déroulantMenu déroulant
Possibilité de sélectionner un élément par Possibilité de sélectionner un élément par
défautdéfaut Attribut : SELECTEDAttribut : SELECTED
Exemple
Pr. Aissam MESRARPr. Aissam MESRAR 2626
Formulaires Formulaires TEXTAREA : zone de texteTEXTAREA : zone de texte
La balise double La balise double <TEXTAREA> permet de crée <TEXTAREA> permet de crée une zone de saisie de texteune zone de saisie de texte
Principaux attributs : NAME, Principaux attributs : NAME, COLS, ROWSCOLS, ROWS
COLS : nombre de colonnesCOLS : nombre de colonnes ROWS : nombre de lignesROWS : nombre de lignes
Exemple : :Votre commentaire :Votre commentaire :
<TEXTAREA NAME="comment" <TEXTAREA NAME="comment" ROWS=5 ROWS=5
COLS=40></TEXTAREACOLS=40></TEXTAREA>>
Pr. Aissam MESRARPr. Aissam MESRAR 2727
Etapes d’exploitation d’un Etapes d’exploitation d’un formulaireformulaire
Accès à la page du formulaire (son URL)Accès à la page du formulaire (son URL)
Remplissage/modification des champsRemplissage/modification des champs
Envoi du formulaire(submit)Envoi du formulaire(submit)
Récupération des paramètres par le Récupération des paramètres par le
scriptscript
Traitement du formulaireTraitement du formulaire
CalculCalcul
TransformationTransformation
Accès aux BD …Accès aux BD …
Renvoi de la réponse au clientRenvoi de la réponse au client
Client
Serveur
Pr. Aissam MESRARPr. Aissam MESRAR 2828
Récupération des paramètresRécupération des paramètres
Les différents éléments du formulaire sont Les différents éléments du formulaire sont
récupérés par le script dans des variablesrécupérés par le script dans des variables
Deux cas selon la configuration de Deux cas selon la configuration de
register_globalsregister_globals
register_globals=onregister_globals=on
register_globals=off register_globals=off (par défaut à partir de la (par défaut à partir de la
version PHP4.2)version PHP4.2)
Pr. Aissam MESRARPr. Aissam MESRAR 2929
Récupération des paramètresRécupération des paramètres register_globals=onregister_globals=on
Les paramètres sont récupérés directement dans des Les paramètres sont récupérés directement dans des
variables qui ont les mêmes noms que leurs homologues variables qui ont les mêmes noms que leurs homologues
dans le formulaire.dans le formulaire.
De moins en moins utiliséeDe moins en moins utilisée
ExempleExemple
Dans le formulaire Dans le formulaire <input name="nom" ><input name="nom" >
Dans le script, cet élément est récupéré dans la variable Dans le script, cet élément est récupéré dans la variable
$nom$nom
Pr. Aissam MESRARPr. Aissam MESRAR 3030
Récupération des paramètresRécupération des paramètres register_globals=offregister_globals=off
Les paramètres sont récupérés dans un tableau :Les paramètres sont récupérés dans un tableau :
$_POST["nom_champs"] si la méthode d’envoi est POST$_POST["nom_champs"] si la méthode d’envoi est POST
$_GET["nom_champs"] si la méthode d’envoi est GET$_GET["nom_champs"] si la méthode d’envoi est GET
ExempleExemple
Dans le formulaire Dans le formulaire <input name="nom" ><input name="nom" >
Dans le script, cet élément est récupéré selon la méthode Dans le script, cet élément est récupéré selon la méthode
d’envoi par :d’envoi par :
$_POST["nom"]$_POST["nom"]
$_GET["nom"]$_GET["nom"]
Pr. Aissam MESRARPr. Aissam MESRAR 3131
Récupération des paramètresRécupération des paramètres
Dans la suite nous supposons queDans la suite nous supposons que
register_globals =offregister_globals =off
Pr. Aissam MESRARPr. Aissam MESRAR 3232
Récupération des paramètresRécupération des paramètres
Zone de saisie, bouton radio et zone de texteZone de saisie, bouton radio et zone de texte
L’élément est récupéré par son nomL’élément est récupéré par son nom
$_POST["nom_champs"] ou $_GET ["nom_champs"]$_POST["nom_champs"] ou $_GET ["nom_champs"]
Cases à cocherCases à cocher
Chaque élément a un nom différentChaque élément a un nom différent
Seuls les éléments cochés seront envoyésSeuls les éléments cochés seront envoyés
Pr. Aissam MESRARPr. Aissam MESRAR 3333
Récupération des paramètresRécupération des paramètres
Liste de sélectionListe de sélection
A choix unique : de la même façon que la zone de saisieA choix unique : de la même façon que la zone de saisie
A choix multiple :A choix multiple :
Le nom de l’élément dans le formulaire doit être suivi des ‘[ ]’Le nom de l’élément dans le formulaire doit être suivi des ‘[ ]’
Dans le script PHP la liste est récupérée dans un tableau selon la Dans le script PHP la liste est récupérée dans un tableau selon la
méthode :méthode :
$tb = $_POST["nom_list_sel"]$tb = $_POST["nom_list_sel"]
$tb = $_GET["nom_list_sel"]$tb = $_GET["nom_list_sel"]
Pr. Aissam MESRARPr. Aissam MESRAR 3434
Traitement du formulaireTraitement du formulaire
Du code PHP : tout est permisDu code PHP : tout est permis
CalculCalcul
TransformationTransformation
Manipulation des fichiersManipulation des fichiers
Accès aux BDAccès aux BD
……