La lecture en PHP

Cette page contient les éléments suivants :

  1. Le passage de revue des différents constituants d'un formulaire;
  2. Les méthodes d'envoi d'un formulaire à une page PHP du serveur;
  3. La façon dont les données sont reçues dans la page de réception;
  4. Un exemple de réalisation de formulaire se trouvera dans l'exercice final de ce module.

Pour rappel, le PHP est exécuté côté serveur. Il n'est donc pas possible sur votre poste client d'effectuer une lecture directe à partir de votre clavier. Les données doivent être entrées dans un formulaire affiché sur votre ordinateur qui, lorsqu'il sera complété, sera envoyé au serveur.

Un formulaire peut contenir des champs de différents types :

  1. Une petite zone de texte;
  2. Une grande zone de texte;
  3. Des cases à cocher;
  4. Des boutons d'option (boutons radio);
  5. Un menu;
  6. Un mot de passe;
  7. (Un champ caché);
  8. Le tout étant terminé par un bouton de soumission (et, éventuellement, de réinitialisation et/ou d'annulation).

Chaque champ sera introduit par la balise <input ...>. Son type sera défini par type="..."

Pour que ce formulaire soit exploitable, un nom devra être associé à chacune des données afin qu'elle puisse être identifiée lors du traitement. Le nom sera défini par name="...".

Nous allons passer en revue les différents types de champs de façon minimaliste. A vous de prendre connaissance de l'évolution de ces balises et de découvrir les nombreuses mises en forme possibles grâce aux CSS.

Les différents types de champs

La petite zone de texte

La déclaration sera <input type="text" name="..." size="..." maxlength="...">

  1. size définit la longueur du champ en caractères (approximatif);
  2. maxlength (facultatif) définit le nombre maximal de caractères que peut accepter le champ.

La grande zone de texte (de plusieurs lignes)

La déclaration sera <textarea name="..." rows="..." cols="..." wrap> <∕textarea>

  1. rows définit le nombre de lignes;
  2. cols définit la largeur en caractères de la zone de texte (approximatif);
  3. wrap rend automatique le retour à la ligne en fin de zone de texte.

Les cases à cocher

Ce champ permet de sélectionner 0, 1 ou plusieurs options dans le choix proposé. Ceci va poser un problème car, pour ce groupe de cases, 0, 1 ou plusieurs valeurs peuvent être transmises. Il y a deux façons de traiter ce type de cases :

  1. Donner à toutes les cases le même "name" et envoyer un tableau contenant les valeurs de toutes les cases ayant été cochées;
  2. Donner à chaque case un "name" différent et examiner pour chacune des cases si elle contient la valeur quelconque prévue (case cochée) ou si elle est vide (case non cochée).

Pour faciliter les choses, nous allons choisir la seconde option.

La déclaration sera :
<input type="checkbox" name="option1" value="oui" checked>Option 1
<input type="checkbox" name="option2" value="oui">Option 2
<input type="checkbox" name="option3" value="oui">Option 3

  1. name : comme expliqué ci-dessus, chaque option aura un "name" différent;
  2. value : au moment de la transmission du formulaire, si la case est cochée, la variable contiendra la valeur "oui", si elle n'est pas cochée, la variable sera vide;
  3. Option 1,... ici en bleu et italique sont affichés à l'écran à côté de la case à cocher correspondante;
  4. checked (facultatif) coche d'office la case correspondante. Celle-ci pourra éventuellement être décochée par l'utilisateur. Cette option peut se trouver à plusieurs reprises dans le même ensemble de cases à cocher.

Les boutons d'options (boutons radio)

Cet ensemble de boutons est très semblable à celui des cases à cocher sinon qu'ils ne permettent de sélectionner qu'une seule des options dans le choix proposé. Pour obtenir cela, on donnera à toutes les options le même "name" afin que les boutons "se reconnaissent entre eux".

La déclaration sera :
<input type="radio" name="..." value="option1">Option 1
<input type="radio" name="..." value="option2">Option 2
<input type="radio" name="..." value="option3" checked>Option 3

  1. name : pour toutes les options du même groupe de boutons d'options, "name" devra être identique;
  2. value définit la valeur qui sera associée au bouton choisi, chaque "value" d'un même groupe devra être différente;
  3. Option 1,... ici en bleu et italique sont affichés à l'écran à côté du bouton d'option correspondant;
  4. checked (facultatif) coche d'office le bouton correspondant. Contrairement aux cases à cocher, il est logique de ne trouver qu'une seule fois cette option dans un même ensemble de boutons.

Le menu (déroulant ou non)

Ce champ est très semblable à celui des boutons d'options mais la sélection unique se fait en cliquant directement sur la ligne du menu affiché à l'écran.

La déclaration sera :
<select name="..." size="2">
<option value="option1">Option 1
<option value="option2" selected>Option 2
<option value="option3">Option 3
</select>

  1. name definit le nom du menu;
  2. value définit la valeur qui sera associée au choix effectué, chaque "value" du menu devra être différente;
  3. Option 1,... ici en bleu et italique sont affichés à l'écran les uns en-dessous des autres;
  4. size définit le nombre de lignes visibles. Si la valeur de "size" est inférieure au nombre d'options, le menu devient automatiquement déroulant;
  5. selected (facultatif) sélectionne d'office la ligne correspondante. Contrairement aux cases à cocher, il est logique de ne trouver qu'une seule fois l'option "selected" dans un menu.

Un exemple de développement d'un menu sophistiqué en HTML et CSS se trouve sur notre site à l'adresse https://fadagogo.com/html-css/html7/menu.html

Le mot de passe

La déclaration sera <input type="password" name="..." size="..." maxlength="...">

Sa structure est identique à celle de la petite zone de texte sinon que tous les caractères entrés dans le champ seront automatiquement affichés (mais pas remplacés) sous forme d'étoiles ou de puces.

  1. size définit la longueur du champ en caractères (approximatif);
  2. maxlength (facultatif) définit le nombre maximal de caractères que peut accepter le champ.

(Le champ caché)

La mise entre parenthèses vient du fait que ce champ ne sera pas visible pour l'utilisateur. C'est le codeur qui se chargera de remplir ce champ. Mais alors, en quoi un tel champ peut-il être utile ? Il sert à passer des données d'une page à l'autre, ce sera utile pour transférer certaines données et aussi pour assurer la sécurité de certaines pages.

La déclaration sera <input type="hidden" name="..." value="...">

Le bouton de soumission

Le fait de cliquer sur ce bouton enverra l'ensemble des données du formulaire à la page PHP désignée (voir ci-dessous).

La déclaration sera <input type="submit" value="...">

  1. value contiendra le libellé choisi pour clôturer et envoyer le formulaire dans son ensemble. Ce libellé sera par exemple "Envoyer", "Enregistrer",...

Le bouton de réinitialisation

Dans le cas où l'utilisateur s'est trompé et désire réinitialiser l'ensemble du formulaire à son état de départ, il est possible de prévoir un bouton pour réaliser cela.

La déclaration sera <input type="reset" value="...">

  1. value contiendra le libellé choisi pour réinitialiser le formulaire dans son ensemble. Ce libellé sera par exemple "Effacer", "Recommencer au début",...
Envoi du formulaire au serveur

Un formulaire est constitué de l'ensemble ou d'une partie des éléments ci-dessus regroupés entre la balise "ouvrante" <form method="..." action="..."> et la balise "fermante" </form>.

  1. method contiendra "GET" ou "POST". Il n'existe que deux méthodes d'envoi au serveur : la méthode GET et la méthode POST;
  2. action contiendra le nom de la page PHP qui recevra et traitera le contenu du formulaire envoyé.

La méthode GET enverra le contenu du formulaire sous forme d'une liste de données à la suite de l'adresse de la page appelée. L'inconvénient est que ces données sont visibles par l'utilisateur dans la fenêtre d'adresse du navigateur et sont ainsi susceptibles d'être modifiées ou piratées.

On privilégiera donc la méthode POST qui enverra les données sous une forme cachée à la page appelée.

Réception des données

Au moment où la page PHP reçoit les données du formulaire, tous les noms des champs ("name") sont automatiquement transformés en variables superglobales pouvant être utilisées dans n'importe quel contexte de cette page de réception.

Si la méthode utilisée a été GET, chaque variable créée sera du type $_GET['...'], les ... étant le nom donné au "name" du champ du formulaire. Pour la méthode POST, chaque variable sera du type $_POST['...'].

Une particularité en PHP, si le champ provenant du formulaire est vide, la variable qui le reçoit sera NULL, elle sera considérée comme non déclarée, inexistante. Avant de traiter toute variable en provenance d'un formulaire, la première chose à faire sera de tester systématiquement "si elle existe" grâce à la fonction isset ($_POST['...']) qui renverra True si elle existe ou False dans le cas contraire. Nous verrons comment faire cela dans l'exemple.

Exemple : si le nom donné à un champ texte est "prenom" et qu'il est envoyé par POST, le contenu de ce champ se retrouvera dans la variable $_POST['prenom'] de la page PHP de destination. Si l'utilisateur n'a pas introduit son prénom et a, ainsi, laissé le champ vide, la fonction isset ($_POST['prenom']) retournera la valeur False.

Exemple

Voir la page La réalisation du formulaire à remplir de l'exercice final.


Voilà, ceci est le minimum comme informations, mais vous pourrez malgré tout commencer à travailler avec ces quelques éléments de base.

Bon travail.

Retour