Chapitre 3 Les Formulaires en PHP

Pr. Aissam MESRARPr. Aissam MESRAR 11

Chapitre 3

Les Formulaires en PHP

Pr. Aissam MESRAR


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


Traitement des Traitement des FormulairesFormulaires


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 ……


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


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


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]" "

mailto:[email protected]


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


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


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>


Formulaires Formulaires Envoi du formulaireEnvoi 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’envoile bouton d’envoiExempleExemple


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


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 le La valeur " Effacer" de l’attribut VA LUE définit le texte affiché sur le

bouton d’envoibouton d’envoiExemple


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


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



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



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 bouton2ExempleExemple


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



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électionExempleExemple



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


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


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>



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



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 : MULTIPLEExemple Exemple



Possibilité de sélectionner un élément par Possibilité de sélectionner un élément par défautdéfaut Attribut : SELECTEDAttribut : SELECTEDExemple


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>>


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


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)


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


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"]


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


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


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"]


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 ……

Documents

Chapitre 3 Les Formulaires en PHP