Traiter les données du formulaire avec PHP

Mais avant d'aborder les formulaires et le traitement des donnée saisies dans ce dernier, je voudrais vous montrer qu'il est possible de passer des données dans la page via l'URL.

Transmettre des données à une page via l'URL

Dois-je vous rappeler que l'URL est la valeur de l'attribut href de la balise A.

Et bien sachez qu'il est possible d'ajouter à cette URL des données !

Tests dans un nouvel onglet

Cliquez sur les liens : accueil, page1, page2 et page3 et observez.
Le rendu dans un nouvel onglet

Dans chacune des pages (après clic sur le lien) il est affiché :

	Site réalisé par 
	Darcheville Patrick

C'est possible car mon nom et mon prénom sont contenus dans l'URL de chaque lien.
Observons le code des liens (contenus dans la page "navigation.htm"). ... <nav> <a href ="index.php?nom=Darcheville&prenom=Patrick">Accueil</a> <a href ="page1.php?nom=Darcheville&prenom=Patrick">Page 1</a> <a href ="page2.php?nom=Darcheville&prenom=Patrick">Page 2</a> <a href ="page3.php?nom=Darcheville&prenom=Patrick">Page 3</a> </nav> ...

Lorsque des données sont transmises via l'URL il y a automatiquement création dans la page cible du tableau associatif $_GET !

Donc si vous cliquez sur le premier lien, par exemple, vous affichez la page d'accueil et vous transmettez à cette page deux données. En effet la valeur de l'attribut href comprend l'URL proprement dite (index.php) mais après un point d'interrogation deux paramètres : nom=Darcheville&prenom=Patrick ; donc deux données séparées par &.
On peut donc transférer vers la page cible autant de paramètres qu'on veut à condition d'écrire un "?" après le lien proprement dit et de séparer les données par le symbole "&".

Le code de l'une des quatre pages du site

A titre d'exemple je vous indique le code de la page "page1.php" (extraits) : ... <section> <h3>Première page du site</h3> <p>Texte de la page : <br> <?php echo "Site réalisé par ". "<br>"; echo $_GET['nom'] . " " . $_GET['prenom'] ; ?> </section> ...

Le code de la page d'accueil (index.php) sera un peu plus complexe pour éviter un message d'erreur lors du premier affichage de cette page ; le tableau $_GET[] n'existe pas encore puisqu'aucun lien n'a été exécuté.
Extrait du code de "index.php" : <?php if (isset($_GET['nom'])) { echo "Site réalisé par ". "<br>"; echo $_GET['nom'] . " " . $_GET['prenom'] ; } else echo "cliquez sur chaque page et observez le passage de paramètres" ?>

Modifier les données transmises

Je veux maintenant vous montrer que le visiteur peut modifier les données affichées dans la barre d'adresse.

Cliquez sur l'un des quatre liens et modifiez l'URL comme suit :
http://darchevillepatrick.info/php2/index.php?nom=Dupont&prenom=Jacques
Puis appuyez sur ENTER.
La page affiche désormais que le site a été réalisé par Dupont Jacques ...

Testez dans un nouvel onglet

Autre test ; cliquez sur l'un des quatre liens puis modifiez l'URL comme suit :
http://darchevillepatrick.info/php2/index.php
Appuyez sur ENTER.
La page n'affiche ni nom ni prénom.

Transmettre des données avec un formulaire

Tests du site "les pages jaunes"

Par exemple allez sur le site "pagesjaunes" et renseignez le formulaire de la page d'accueil :
Saisir "hotel" et "Paris" puis cochez "proximité".
La barre d'adresse contient alors :
http://www.pagesjaunes.fr/annuaire/ chercherlespros?quoiqui=hotel&ou=paris&proximite=1

Si vous voulez connaître les hôtels sur Lille il vous suffit de modifier le texte dans la barre d'adresse :
http://www.pagesjaunes.fr/annuaire/ chercherlespros?quoiqui=hotel&ou=lille&proximite=1
Puis d'appuyer sur ENTER.

Si vous voulez connaître les restaurants sur Calais modifiez comme suit :
http://www.pagesjaunes.fr/annuaire/ chercherlespros?quoiqui=restaurant&ou=calais&proximite=1
Puis d'appuyer sur ENTER.

Ce qui veut dire que le formulaire du site "pagesjaunes" utilise la méthode GET !
Les données saisies apparaissent dans la barre d'adresse et peuvent être modifiées par le visiteur.

Le rendu "les pages jaunes"

Conclusion

Le formulaire proposé par le site les "pages jaunes" est basé sur la méthode GET !

Lorsque des données de formulaire sont envoyées avec la méthode GET ces données apparaissent dans la barre d'adresse et peuvent donc être modifiées par le visiteur.
Donc insérer des données dans les liens ou envoyer ces données de formulaire avec la méthode GET sont deux techniques qui aboutissent au même résulat : ces paramètres apparaissent dans la barre d'adresse et peuvent donc être modifiées par le visiteur !
Donc si vous devez adresser à une page un identifiant et un mot de passe surtout n'utilisez pas un formulaire basé sur la méthode GET !
Utilisez la méthode POST ; Avec cette méthode les données n'apparaissent jamais dans la barre d'adresse.

Un formulaire reposant sur la méthode POST

Vous devez concevoir un formulaire d'inscription à un site.

Dans un premier on va utiliser deux pages : l'une contenant le formulaire et une autre pour le traitement des données envoyées.

La page contenant le formulaire d'inscription

La page se nomme "inscription_form.php".
Elle pourrait avoir pour extension .htm puisqu'elle ne contient pas de code PHP mais il est plus simple que dans un site toutes les pages aient la même extension.

Le code de la page (extraits) : ... <style> form {width : 96% ; margin :auto ; } label, input {width : 40% ; display : inline-block ; margin :10px ; } input:valid {color : green ; } input:invalid {color : red; } ... <form action = "inscription_trait.php" method ='post'> <p class ="remarque">Vous devez saisir deux fois votre identifiant et deux fois le mot de passe ! </p> <label>Tapez votre identifiant (adresse mail) : </label> <input type = "email" required placeholder = "n'oubliez pas @" name ='mail1'> <label>Confirmez votre identifiant (adresse mail) : </label> <input type = "email" required placeholder = "n'oubliez pas @" name ='mail2'> <label>Saisissez votre mot de passe :</label> <input type = "password" required pattern ='[A-z]{6,8}' maxlength ='8' placeholder = 'entre 6 et 8 lettres non accentuées' name ='passe1'> <label>Confirmez le mot de passe retenu :</label> <input type = "password" required pattern ='[A-z]{6,8}' maxlength ='8' placeholder = 'entre 6 et 8 lettres non accentuées' name ='passe2'> <label></label><button type = 'submit'> connexion</button> </form> ...

La feuille de style :
emploi des pseudo-classes :valid et :invalid.
Tant qu'une saisie dans un champ est invalide (saisie ne correspondant pas au type ou au gabarit (défini dans l'attribut pattern) elle apparaît en rouge ; dès que la saisie est correcte elle apparaît en vert.

Le code HTML (code du formulaire :
les données sont envoyées dans la page "inscription_trait.php" avec la méthode POST.
Le formulaire comprend quatre champs car il faut saisir deux fois l'identifiant (une adresse mail) et deux fois le mot de passe.
Emploi des attributs HTML : required, pattern, placeholder.
Soumission des données avec un bouton de type submit donc tant que les quatre champs ne sont pas correctement remplis (champs vides ou invalides) la soumission est bloquée.

Le code de la deuxième page - celle traitant les données

La page se nomme "inscription_trait.php" c'est à dire la valeur de l'attribut action de la première page.

Ci-dessous le code PHP de cette page : ... <h3> <?php if($_POST['mail1']==$_POST['mail2'] and $_POST['passe1']==$_POST['passe2']) { echo "vous êtes inscrits !" . "<br>"; echo "votre identifiant est : " .$_POST['mail1']. "<br>"; echo "votre mot de passe est : " .$_POST['passe1']. "<br>"; echo "notez ces paramètres !" . "<br>"; // ajout d'un enregistrement dans la table des inscrits } // fin if else { echo "erreur de saisie !" . "<br>"; echo "les idenfiants et/ou les mots de passe sont différents !" . "<br>"; } // fin else ?> </h3> ...

Le code PHP complète les contrôles de saisie HTMl5.
Pour que la saisie soit correcte il faut non seulement que les deux premiers champs contiennent des adresses mails valides mais il faut aussi que ces deux adresses soient strictement identiques.
De même il faut que les deux derniers champs aient aussi un mot de passe identique.
Ce sont ces contrôles qu'effectue la routine PHP puisque HTML est incapable de faire des comparaisons.

Le traitement PHP est cependant incomplet. Si les données saisies sont valides il faut créer un nouvel enregistrement dans la table des inscrits. Il faut donc en PHP appeler une requête SQL de type action qui commence par le mot clé INSERT. Le SQL est évoqué plus loin dans ce tuto.

Le rendu dans un nouvel onglet

Notez bien qu'après une soumission réussie c'est la page "inscription_trait.php" qui s'affiche.
Remarquez aussi que les paramètres saisis (et en particulier le mot de passe) n'apparaissent plus dans la barre d'URL car les données sont adressées avec la méthode POST.

Une seule page !

On peut mettre dans un même page le formulaire et le traitement.
L'extension de la page unique doit obligatoirement être .php.
Ci-dessous ce qui change : ... <body> <form action = "#" method ='post'> ... <h3> <?php if(isset($_POST['mail1'])) { ... ?> ...

Il faut modifier la valeur de l'attribut action de la balise form ; # signifie "même page".
Le reste du code du formulaire est inchangé.

Pour la routine PHP il faut intégrer le code précédent dans un test basé sur la fonction isset afin d'éviter l'affichage d'un message d'erreur éventuel lorsque le tableau $_POST n'existe pas ; message qui pourrait pertuber le visiteur.

Le rendu dans un Iframe :

Boutons radio & cases à cocher & listes

Dans un formulaire il n'y a pas que des zones de texte (avec contenu visible ou masqué ; zones monoligne ou multilignes). En d'autres termes, il n'y pas que des "input text, input password ou textarea".

Je vous propose un formulaire qui comprend un groupe de boutons radio, un groupe de cases à cocher, une liste à choix unique et une liste à choix multiple.
Je vous rappelle que pour créer un groupe de boutons radio il faut leur donner le meme nom et qu'on ne peut alors cocher qu'un bouton.
On peut donner le même nom à un groupe de case à cocher mais le nom doit alors comprendre des crochets terminaux ; même remarque pour une liste à choix multiple.

Exemple de formulaire avec traitement PHP dans la même page

Le code du formulaire

...
<form name ="f" action ="#" method = "post" style ="width : 80%; margin: auto; border : 2px solid black;">
	<p>Quelle est votre genre ? </p>
    <input type="radio" name="sexe" value="Monsieur"/>Masculin <br>
    <input type="radio" name="sexe" value="Madame" checked />Féminin<br>
	
	<p>Votre tranche d'âge ? </p>
	<select name = 'age'> 
		<option value = 't1'>Moins de 20 ans </option>
		<option value = 't2'>Entre 20 et 40 ans </option>
		<option value = 't3'>Entre 40 et 60 ans  </option>
		<option value = 't4'>Plus de 60 ans </option>
	</select>
 
	<p>Quelle est votre couleur préférée ; vous pouvez cocher plusieurs cases.</p>
	<input type="checkbox" name="gouts[]" value="rouge" >Rouge <br>
	<input type="checkbox" name="gouts[]" value="vert">Vert<br>
	<input type="checkbox" name="gouts[]" value="bleu" >Bleu <br>
	<input type="checkbox" name="gouts[]" value="noir">Noir <br>
	<input type="checkbox" name="gouts[]" value="jaune">Jaune <br>
	<input type="checkbox" name="gouts[]" value="autres">Autre couleur <br>
	<input type="checkbox" name="gouts[]" value="aucune" checked >Aucune <br>
	
	
	<p>Sports pratiqués ?  </p>
	<select name = 'sports[]' multiple style ="height : 50px;"> 
		<option value = 'foot'>Football</option>
		<option value = 'nata'>Natation</option>
		<option value = 'vélo'>Vélo</option>
		<option value = 'tennis'>tennis</option>
		<option value = 'autre'>Autre sport</option>
		<option value = 'aucun'>Aucun sport</option>
	</select>
	<br><input type ="submit" value ="validez" name ="valider">
</form>
<h3>Données adressées au serveur : <br>

Notez la valeur de l'attribut action"= "#" ; ce qui signifie que le résultat du traitement PHP est adressé dans la page du formulaire.
Notez le nom du groupe de cases à cocher et de la liste à choix multiple gouts[] & sports[]. Les crochets sont obligatoires ; ils précisent que les "value" des cases "checked" ou des items "selected" seront ajoutées dans un tableau.

Le script PHP

...
<?php
if(isset($_POST['sexe']))
{
	echo "Genre :  " . $_POST['sexe'] . "<br>";
	echo "Tranche d'âge : " . $_POST['age'] . "<br>";
	echo "Vos couleurs préférées : " . "<br>"; 
		foreach($_POST['gouts'] as $gout) 		{echo $gout . "<br>";}
	echo "Vos sports pratiqués : " . "<br>"; 
		foreach($_POST['sports'] as $sport) 		{echo $sport . "<br>";}
}
?>
</h3>
...

Le traitement PHP est lancé seulement si la variable $_POST['sexe'] existe. À défaut de ce test, vous auriez un message d'erreur (non bloquant) mais pertubant pour l'internaute.

Le traitement du groupe de boutons radio est tres simple puisqu'une seule valeur saisie ; même remarque pour la liste à choix unique.

Par contre le traiement du groupe de case à cocher et de la liste à choix multiple est plus complexe puisque plusieurs valeurs peuent être saisies (cases "checked" ou items "selected").
Il faut une boucle pour parcourir les différents items du tableau $_POST['gouts'] et une autre pour parcourir ceux du tableau $_POST['sport').

Le rendu dans un iframe

Sélectionnez plusieurs couleurs et plusieurs sports avant de soumissionner.

Les résultats du traitement PHP apparaissent sous le formulaire de saisie.

Traduction

Débuter en programmation web - sommaire

Initiation au HTML & CSS

Pour des pages dynamiques - initiation à PHP & SQL

Débuter en programmation web - recherche

L'auteur : Patrick Darcheville