Chapitre 3
Les Formulaires en PHP
Plan
Plan
IntroductionIntroduction
Eléments de base du langage PHPEléments de base du langage PHP FonctionsFonctions TableauxTableaux FormulairesFormulaires PHP et MySQLPHP et MySQL CookiesCookies SessionsSessions
Traitement des
Traitement des
Formulaires
Formulaires
Formulaire : Rappel
Formulaire : Rappel
Objectifs
Objectifs
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 SGBDs
manipuler les SGBDs
Formulaire : Rappel
Formulaire : 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 ……
Formulaires
Formulaires
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 texte
formulaire peut contenir du texte
Toutes les mises en forme peuvent être Toutes les mises en forme peuvent être
appliquées aux éléments du formulaire
appliqué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
Formulaires
Formulaires
Principaux attributs d’un formulaire
Principaux attributs d’un formulaire
<FORM
<FORM ACTIONACTION="script" ="script" METHODMETHOD="post" NAME="post" NAME
="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és
envoyés
Formulaires
Formulaires
Principaux attributs d’un formulaire
Principaux attributs d’un formulaire
<FORM
<FORM
ACTION
ACTION
="script"
="script"
METHOD
METHOD
="post"
="post"
NAME
NAME
="nom_form">
="nom_form">
METHOD
METHOD
: méthode d’envoi des données
: méthode d’envoi des données
GET
GET
ou
ou
POST
POST
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)
Formulaires
Formulaires
Balise <INPUT>
Balise <INPUT>
<INPUT> : crée une zone de saisie
<INPUT> : crée une zone de saisie
Balise monolithiqueBalise monolithique
Principaux attributs
Principaux 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, …))
Formulaires
Formulaires
Saisie des champs de texte
Saisie des champs de texte
Zone de saisie du texteZone de saisie du texte
ExempleExemple
Votre 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>
Formulaires
Formulaires
Envoi du formulaire
Envoi du formulaire
Pour envoyer le formulaire, il suffit de cliquer avec la souris sur Pour envoyer le formulaire, il suffit de cliquer avec la souris sur
un bouton spécial créé par la balise <INPUT>
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 d’envoiLa valeur "submit" de l’attribut TYPE caractérise le bouton d’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’envoi
le bouton d’envoi Exemple
Formulaires
Formulaires
Données envoyées
Données envoyées
Seuls sont envoyés les noms des champs et
Seuls sont envoyés les noms des champs et
les valeurs correspondantes
les valeurs correspondantes
ExempleExemple
nom=Ali
nom=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 champs
Formulaires
Formulaires
Modification du formulaire
Modification 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
modification modification
La valeur " Effacer" de l’attribut VA LUE définit le texte affiché sur le La valeur " Effacer" de l’attribut VA LUE définit le texte affiché sur le
bouton d’envoi bouton d’envoi
Exemple
Formulaires
Formulaires
Saisie d’un mot de passe
Saisie 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 étoiles
sont 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>
Exemple
Formulaires
Formulaires
Boutons radio
Boutons 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 bouton2
du bouton2
La valeur de l’attribut NAME est commune à tous les boutons
Formulaires
Formulaires
Boutons radio
Boutons radio
Sélectionner un élément dans une liste
Sélectionner un élément dans une liste
Cocher avec la sourisCocher avec la souris
Une deuxième sélection annule la première
Une deuxième sélection annule la première
Choix exclusifChoix exclusif
Exemple
Exemple
Formulaires
Formulaires
Boutons radio
Boutons radio
L’attribut CHECKED permet de cocher par
L’attribut CHECKED permet de cocher par
défaut l’un des boutons
dé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
Exemple
Formulaires
Formulaires
Cases à cocher
Cases à 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 ="
Formulaires
Formulaires
Cases à cocher
Cases à cocher
Sélectionner un élément Sélectionner un élément
dans une liste
dans une liste
Cocher avec la sourisCocher avec la souris
Possibilité de cocher Possibilité de cocher
plusieurs éléments
plusieurs é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élection
sélection
Formulaires
Formulaires
Cases à cocher
Cases à 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
CHECKED
CHECKED
Exemple ExempleFormulaires
Formulaires
Menu déroulant
Menu 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
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>
Formulaires
Formulaires
Menu déroulant
Menu déroulant
SIZE : indique le nombre de Lignes visibles du SIZE : indique le nombre de Lignes visibles du
menu
menu
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
Formulaires
Formulaires
Menu déroulant
Menu 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
Formulaires
Formulaires
Menu déroulant
Menu déroulant
Possibilité de sélectionner un élément par Possibilité de sélectionner un élément par
défaut
défaut
Attribut : SELECTEDAttribut : SELECTED
Exemple
Formulaires
Formulaires
TEXTAREA : zone de texte
TEXTAREA : zone de texte
La balise double La balise double
<TEXTAREA> permet de crée
<TEXTAREA> permet de crée
une zone de saisie de texte
une zone de saisie de texte
Principaux attributs : NAME, Principaux attributs : NAME, COLS, ROWS
COLS, ROWS
COLS : nombre de colonnesCOLS : nombre de colonnes ROWS : nombre de lignesROWS : nombre de lignes
ExempleExemple : : Votre commentaire : Votre commentaire : <TEXTAREA NAME="comment" <TEXTAREA NAME="comment" ROWS=5 ROWS=5 COLS=40></TEXTAREA COLS=40></TEXTAREA>>
Etapes d’exploitation d’un
Etapes d’exploitation d’un
formulaire
formulaire
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
script
script
Traitement du formulaireTraitement du formulaire CalculCalcul
TransformationTransformation Accès aux BD …Accès aux BD …
Renvoi de la réponse au client
Renvoi de la réponse au client
Client
Récupération des paramètres
Ré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 variables
récupérés par le script dans des variables
Deux cas selon la configuration de Deux cas selon la configuration de register_globals
register_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)
Récupération des paramètres
Ré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
Récupération des paramètres
Ré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"]
Récupération des paramètres
Récupération des paramètres
Dans la suite nous supposons que
Dans la suite nous supposons que
register_globals =off
Récupération des paramètres
Ré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
Récupération des paramètres
Ré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 Dans le script PHP la liste est récupérée dans un tableau selon
la méthode :
la méthode :
$tb = $_POST["nom_list_sel"]$tb = $_POST["nom_list_sel"] $tb = $_GET["nom_list_sel"]$tb = $_GET["nom_list_sel"]
Traitement du formulaire
Traitement 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