Traitement des formulaires HTML en PHP
Ces données collectées peuvent être exploitées coté serveur par un programme écrit en Perl, en ASP.NET, en Java, ..., et bien sur en PHP.
Le propos de cet article est de montrer comment les échanges de données sont gérés entre le formulaire HTML et le script PHP à travers un formulaire permettant de saisir un nom, un prénom et un age.
Créer un formulaire HTML
Un formulaire HTML se construit comme n'importe quelle page Web grâce à des balises HTML.
La balise qui définit un formulaire est la balise <form>. Cette balise possède trois paramètres:
- Le paramètre name pour donner un nom au formulaire. Ce nom permet de manipuler le formulaire en javascript qui est un langage de programmation embarqué dans le langage HTML.
- Le paramètre action pour désigner ce que doit faire le serveur quand le formulaire est validé par un submit. En PHP, c'est l'url de la page PHP qui va être appelée pour traiter les information collectées dans le formulaire.
- Le paramètre method pour définir comment sont passé les valeurs collectées. Il existe deux méthodes : get et post.
Les objets d'interface qui permettent la collecte des informations sont définies par la balise <input>. Le propos ici n'est pas de décrire cette balise. Il vaut mieux se reporter à un site de référence comme https://www.w3schools.com/Tags/tag_input.asp. La seul chose à retenir est que cette balise doit avoir au moins trois paramètres :
- Le paramètre name pour donner un nom à l'objet d'interface. Ce nom permet d'une part de manipuler l'objet en javascript pour effectuer des contrôles de saisie par exemple, et d'autre part de retrouver la valeur collectée dans la page PHP définie dans le paramètre action de la balise <form.>.
- Le paramètre type qui permet de désigner la nature de l'objet d'interface, zone texte, bouton, liste, etc. Un formulaire doit posséder au moins un objet d'interface de type submit qui correspond au bouton de validation du formulaire et va déclencher l'exécution de la page PHP définie dans le paramètre action de la balise <form>.
- Un paramètre optionnel value qui permet d'indiquer ce qui est affiché par défaut dans l'objet d'interface. Pour les boutons, cela permet d'afficher du texte dans le bouton.
La page web ci-dessous (fichier formulaire.html) contient deux formulaires avec les mêmes zones de saisie. Le premier formulaire fonctionne avec la méthode GET, le second fonctionne avec la méthode POST. Le choix de la méthode est déterminant pour savoir comment récupérer les données collectées en PHP.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>sans titre</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.29" />
</head>
<body>
<h1>Formulaire en mode GET</h1>
<form name="form_get" action="action.php" method="get">
<table border="1">
<tr>
<td>Nom :</td>
<td>
<input name="nom" type="text" />
</td>
</tr>
<tr>
<td>Prénom :</td>
<td>
<input name="prenom" type="text" />
</td>
</tr>
<tr>
<td>Age :</td>
<td>
<input name="age" type="text" />
</td>
</tr>
<tr>
<td></td>
<td>
<input name="ok" type="submit" value="OK" />
<input name="cancel" type="reset" value="Annuler" />
</td>
</tr>
</table>
</form>
<h1>Formulaire en mode POST</h1>
<form name="form_post" action="action.php" method="post">
<table border="1">
<tr>
<td>Nom :</td>
<td>
<input name="nom" type="text" />
</td>
</tr>
<tr>
<td>Prénom :</td>
<td>
<input name="prenom" type="text" />
</td>
</tr>
<tr>
<td>Age :</td>
<td>
<input name="age" type="text" />
</td>
</tr>
<tr>
<td></td>
<td>
<input name="ok" type="submit" value="OK" />
<input name="cancel" type="reset" value="Annuler" />
</td>
</tr>
</table>
</form>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>sans titre</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.29" />
</head>
<body>
<h1>Formulaire en mode GET</h1>
<form name="form_get" action="action.php" method="get">
<table border="1">
<tr>
<td>Nom :</td>
<td>
<input name="nom" type="text" />
</td>
</tr>
<tr>
<td>Prénom :</td>
<td>
<input name="prenom" type="text" />
</td>
</tr>
<tr>
<td>Age :</td>
<td>
<input name="age" type="text" />
</td>
</tr>
<tr>
<td></td>
<td>
<input name="ok" type="submit" value="OK" />
<input name="cancel" type="reset" value="Annuler" />
</td>
</tr>
</table>
</form>
<h1>Formulaire en mode POST</h1>
<form name="form_post" action="action.php" method="post">
<table border="1">
<tr>
<td>Nom :</td>
<td>
<input name="nom" type="text" />
</td>
</tr>
<tr>
<td>Prénom :</td>
<td>
<input name="prenom" type="text" />
</td>
</tr>
<tr>
<td>Age :</td>
<td>
<input name="age" type="text" />
</td>
</tr>
<tr>
<td></td>
<td>
<input name="ok" type="submit" value="OK" />
<input name="cancel" type="reset" value="Annuler" />
</td>
</tr>
</table>
</form>
</body>
</html>
Dans le formulaire ci-dessus, ne sont surlignées en vert que les balises qui concernent le fonctionnement des formulaires. Les autres balises sont relatives à la présentation des informations dans un tableau.
Un script PHP est structuré comme une page Web. Mais il peut contenir des instructions programmées en langage PHP insérées entre les marqueurs <?php et ?>.
Le script ci-dessous (fichier action.php) définit le traitement à effectuer lorsque l'internaute clique les boutons submit du formulaire précédent.
Traitement PHP à effectuer à la validation du formulaire
Lorsque l'internaute clique le bouton submit du formulaire, la page PHP définie dans le paramètre action de la balise <form> du formulaire est exécutée.Un script PHP est structuré comme une page Web. Mais il peut contenir des instructions programmées en langage PHP insérées entre les marqueurs <?php et ?>.
Le script ci-dessous (fichier action.php) définit le traitement à effectuer lorsque l'internaute clique les boutons submit du formulaire précédent.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>sans titre</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.29" />
</head>
<body>
<h1>Réponse de la méthode GET</h1>
<table border="1">
<tr><th>Clef</th><th>Valeur</th></tr>
<?php
foreach ($_GET as $key=>$value) {
echo "<tr><td>$key</td><td>$value</td></tr>";
}
?>
</table>
<h1>Réponse de la méthode POST</h1>
<table border="1">
<tr><th>Clef</th><th>Valeur</th></tr>
<?php
foreach ($_POST as $key=>$value) {
echo "<tr><td>$key</td><td>$value</td></tr>";
}
?>
</table>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>sans titre</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.29" />
</head>
<body>
<h1>Réponse de la méthode GET</h1>
<table border="1">
<tr><th>Clef</th><th>Valeur</th></tr>
<?php
foreach ($_GET as $key=>$value) {
echo "<tr><td>$key</td><td>$value</td></tr>";
}
?>
</table>
<h1>Réponse de la méthode POST</h1>
<table border="1">
<tr><th>Clef</th><th>Valeur</th></tr>
<?php
foreach ($_POST as $key=>$value) {
echo "<tr><td>$key</td><td>$value</td></tr>";
}
?>
</table>
</body>
</html>
La méthode GET transmet les valeurs dans une url. Les objets d'interface ne doivent donc pas contenir de caractères qui bousculeraient les contraintes de syntaxe des urls. La méthode POST est plus adaptée à la collecte de données. Pour PHP, la seule différence est le tableau associatif qui sera utilisé pour récupérer les données.
Le premier script explore le tableau associatif $_GET pour afficher les données passées par la méthode GET dans un tableau. Le second script fait la même chose pour le tableau associatif $_POST pour les données passées par la méthode POST.
Le premier script explore le tableau associatif $_GET pour afficher les données passées par la méthode GET dans un tableau. Le second script fait la même chose pour le tableau associatif $_POST pour les données passées par la méthode POST.
Test du formulaire
Pour accéder au formulaire, il faut taper l'url http://cluster01.apl/formulaire.html (pour tester, le fichier formulaire.html se trouve sur la racine du répertoire /var/www/pub du serveur WEB installé sur le cluster cluster01).
Test du formulaire en mode Get
La saisie ce fait comme ci-dessous et il faut cliquer le premier bouton OK.
Cliquer l'un des boutons OK déclenche l'affichage de la page action.php.
Remarques :
- En méthode GET, les données sont récupérées par la variable globale $_GET. Cette variable est un tableau associatif clef=valeur. Clef contient le nom de l'objet d'interface défini dans le paramètre name de la balise <input>. Valeur contient la valeur du paramètre value de la balise <input>, valeur qui peut être modifiée par l'internaute si le type d'objet d'interface (comme text par exemple) le permet.
- En méthode GET, la variable globale $_POST est vide.
- L'url passée pour déclencher l'affichage de la page action.php a la forme http://cluster01.apl/action.php?nom=LIMOUZIN&prenom=André+Pierre&age=62&ok=OK
Test du formulaire en mode Post
La saisie ce fait comme ci-dessous et il faut cliquer le second bouton OK.
Cliquer l'un des boutons OK déclenche l'affichage de la page action.php.
Remarques :
- En méthode POST, les données sont récupérées par la variable globale $_POST. Cette variable est un tableau associatif clef=valeur. Clef contient le nom de l'objet d'interface défini dans le paramètre name de la balise <input>. Valeur contient la valeur du paramètre value de la balise <input>, valeur qui peut être modifiée par l'internaute si le type d'objet d'interface (comme text par exemple) le permet.
- En méthode POST, la variable globale $_GET est vide.
- L'url passée pour déclencher l'affichage de la page action.php a la forme http://cluster01.apl/action.php et ne fait pas apparaître dans l'url les valeurs saisies dans le formulaire.
Commentaires
Enregistrer un commentaire