Sommaire

rappel de HTML pour insérer un formulaire avec la balise <form> :
Sur la première ligne du code, il y a 2 attributs très importants à connaître pour la balise <form> : la méthode (method) et la cible (target). Il est impératif de bien comprendre à quoi ils servent.

La méthode

Il faut savoir qu'il y a plusieurs moyens d'envoyer les données du formulaire (plusieurs "méthodes"). Les 2 méthodes possibles sont :

• get : les données transiteront par l'URL comme on l'a vu précédemment. On pourra les récupérer grâce à l'array $_GET. Cette méthode est assez peu utilisée car on ne peut pas envoyer beaucoup d'informations dans l'URL.
• post : les données ne transiteront pas par l'URL, l'utilisateur ne les verra donc pas passer dans la barre d'adresse. Cette méthode permet d'envoyer autant de données que l'on veut. Néanmoins, les données ne sont pas plus sécurisées qu'avec l'autre méthode et il faudra faire les mêmes vérifications.

La cible

L'attribut action sert à définir la page appelée par le formulaire. C'est cette page qui recevra les données du formulaire et qui sera chargée de les traiter.

Imaginons le schéma suivant :

Dans cet exemple, le formulaire se trouve dans la page formulaire.php. Cette page ne fait aucun traitement particulier, mais une fois le formulaire envoyé(après avoir cliqué sur le bouton "Envoyer"), le visiteur est redirigé vers la page cible.php qui reçoit les données du formulaire.
Le nom de la page cible est défini grâce à l'attribut action

La page cible ne doit pas forcément s'appeler cible.php. En théorie, rien n'empêche non plus à ce que le formulaire s'appelle lui-même. Il suffirait d'écrire target="formulaire.php". Dans ce cas, la page formulaire doit être capable aussi bien d'afficher le formulaire que de traiter les données.

Dans un formulaire, on peut insérer beaucoup d'éléments différents : zones de textes, boutons, cases à cocher, etc.
On va tous les lister et voir comment se servir de chacun d'eux dans la page cible.php qui fera le traitement. C'est simple, au lieu de recevoir un array $_GET, on va recevoir un array $_POST contenant les données du formulaire.

Les petites zones de texte

En HTML, on l'insère avec la balise :

Pour les mots de passe, on peut utiliser type="password", ce qui aura pour effet de cacher le texte rentré par le visiteur. Sinon, même fonctionnement.

Il y a 2 attributs à connaître que l'on peut ajouter à cette balise :

• name (obligatoire) : c'est le nom de la zone de texte. Bien le choisir, car c'est lui qui va produire une variable. Par exemple :
  <input type="text" name="pseudo" />
• value (facultatif) : c'est ce que contient la zone de texte au départ. Par défaut, la zone de texte est vide. Mais il peut être pratique de pré-remplir le champ. Exemple :
  <input type="text" name="pseudo" value="alain33" />

Le texte que le visiteur aura rentré sera disponible dans cible.php sous la forme d'une variable appelée $_POST['pseudo'].

Pour exemple, on va créer un formulaire qui demande le prénom du visiteur et qui l'affiche ensuite fièrement sur la page cible.php. On va distinguer 2 codes sources : celui de la page formulaire et celui de la page cible.

Code source de la page formulaire.php :

Maintenant la page cible.php. Cette page va recevoir le prénom dans une variable nommée $_POST['prenom'] :

Dans cible.php on a affiché une variable $_POST['prenom'] qui contient ce que le visiteur a rentré dans le formulaire.

Les grandes zones de texte

La grande zone de texte ou "Zone de saisie multiligne" ressemble à ceci :

On va utiliser le code HTML pour insérer cette grande zone de texte :
On remarque qu'il n'y a pas d'attribut value. En fait, le texte par défaut est ici écrit entre le <textarea> et </textarea>. Si on ne veut rien mettre par défaut, alors ne rien écrire entre <textarea> et </textarea>.

Les attibuts rows et cols permettent de définir le taille de la zone de texte respectivement en hauteur et en largeur.

La liste déroulante

Voici une liste déroulante :
Ici, une variable $_POST['choix'] sera créée et contiendra le choix fait par l'utilisateur. S'il a choisi "Choix 3", la variable $_POST['choix'] sera égale au value correspondant, c'est à dire "choix3".

On peut aussi définir le choix par défaut dans la liste. Normalement c'est le premier, mais si on rajoute l'attribut selected="selected" à une balise <option>, alors ce sera le choix par défaut. Par exemple :

Les cases à cocher

Cases à cocher :

L'utilisation de la balise <label> n'est pas obligatoire mais est fortement recommandée. Elle permet d'associer le libellé à la case à cocher qui a le même id que son attribut for, ce qui permet de cliquer sur le libellé pour cocher la case. On y gagne en ergonomie d'utilisation. Se référer au chapitre sur les formulaires du tuto XHTML - CSS.

Ici aussi, on donne un nom à la case à cocher via l'attribut name (ici : "case"). Ce nom va générer une variable dans la page cible, par exemple $_POST['case'].

• Si la case est cochée, alors $_POST['case'] aura pour valeur "on".
• Si elle n'est pas cochée, alors $_POST['case'] n'existera pas. On peut faire un test avec isset($_POST['case']) pour vérifier si la case a été cochée ou non.

Si on veut que la case soit cochée par défaut, il faut rajouter l'attribut checked="checked" :

Les boutons d'option

Les boutons d'option fonctionnent par groupes de 2 minimum. Exemple :

Comme on voit, les deux boutons d'option ont le même nom ("frites"). C'est très important, car les boutons d'options fonctionnent par groupes : tous les boutons d'option d'un même groupe doivent avoir le même nom. Cela permet au navigateur de savoir quels boutons d'option désactiver quand on active un autre bouton d'option du groupe (cela évite de sélectionner "Oui" et "Non" à la fois par exemple).

Idem pour pré-cocher un des boutons qu'avec les cases à cocher. Ici, "Oui" est sélectionné.

Dans la page cible, une variable $_POST['frites'] sera créée et aura la valeur du bouton d'option choisi par le visiteur, issue de l'attribut value.
Bien penser à remplir l'attribut value du bouton d'option car c'est lui qui va déterminer la valeur de la variable.

Les champs cachés

Les champs cachés sont un type de champ à part. c'est quoi ? C'est un code dans le formulaire qui n'apparaîtra pas aux yeux du visiteur, mais qui créera néanmoins une variable avec une valeur. Cela peut servir pour transmettre des informations fixes.
Exemple : supposons que nous ayons besoin de "retenir" que le pseudo du visiteur est "alain33". on va taper ce code :
A l'écran, sur la page web on ne verra rien. Mais dans la page cible, une variable $_POST['pseudo'] sera créée et aura la valeur "alian33".
Apparemment inutile, on peut parfois en avoir besoin.

Par erreur on croit, parce que ces champs sont cachés, le visiteur ne peut aps les voir. C'est faux ! Car n'importe quel visiteur peut afficher le code source de la page et le voir. Mieux, il peut modifier la valeur du champ caché s'il a les outils appropriés. Moralité : vu que ces champs cachés peuvent être modifiés et même supprimés, ne jamais faire confiance aux données envoyées par le visiteur !

On a vu qu'on pouvait modifier l'URL. On a tendance à croire que les visiteurs ne peuvent aps "bidouiller" le formulaire, mais c'est faux. On va voir d'abord qu'ils ne sont pas plus surs, puis on verra un autre danger important : la faille XSS.

Pourquoi les formulaires ne sont pas sûrs

Tout ce qui a été vu avec les URL reste valable ici. Tout ce qui vient de l'utilisateur, à savoir les données de $_GET et $_POST, doit être traité avec prudence.
On ne peut pas supposer qu'on va recevoir ce qu'on attendait
C'est un règle simple. Prenons un exemple : on demande à nos visiteurs dans un champ leur date de naissance au format "JJ/MM/AAAA". Combien vont respecter cette mise en forme ? Combien vont se tromper ? Par conséquent, quand on fera le traitement de la date en PHP, il faudra bien vérifier qu'elle respecte le format indiqué.

Pour vérifier si une chaîne de texte correspond à un certain format, comme JJ/MM/AAAA, on peut utiliser une validation par expression régulière. Les expressions régulières feront l'objet de 2 chapitres à la fin du tuto car il s'agit d'un sujet assez complexe.

De même, comme dans les précédents chapitre, si on demande un chiffre entre 1 et 100, il y en aura forcément un pour écrire "156348915". Donc mé,fiance, n'avoir jamais confiance dans les données issues des array $_GET et $_POST.
Egalement, avec les formulaires, on ne peut pas supposer qu'on va nous envoyer tous les champs attendus. Il faudra impérativement que la page cible.phpvérifie que toutes les données attendues sont bien là avant d'effectuer les opérations.

Puisque la page formulaire est sur mon site, comment peut faire un visiteur pour modifier ma page web ? Il peut voir les sources mais pas les modifier !

Effectivement, les visiteurs ne peuvent pas modifier nos pages web sur le serveur… Mais ils peuvent les reprendre et les modifier ailleurs. Reprenons le schéma :


La page formulaire.php contient le formulaire et cible.php traite les données qu'on lui a envoyées. Autant le code PHP n'est jamais visible par les visiteurs, autant le code HTML du formulaire, lui, peut-être vu par tout le monde.

A partir de là, qu'est-ce qui empêche quelqu'un de créer une copie légèrement modifiée du formulaire et de la stocker sur son serveur ?
Sur ce schéma, le "méchant" a pris le code HTML du formulaire, l'a modifié et l'a enregistré sur son serveur (ou même sur son ordinateur). L'attribut action a été modifié pour indiquer l'adresses absolue (donc complète) de notre page cible :
Le méchant peut maintenant modifier le formulaire, ajouter des champs, en supprimer, bref faire ce qu'il veut avec ! Notre page cible.php ne verra rien car il est impossible de savoir avec certitude de quel formulaire vient le visiteur.(???)
ce qu'il faut retenir, c'est que les formulaires sont modifiables par tous les visiteurs. Donc, la page cible.php devra être aussi vigilante que possible.

Il y a encore plus simple pour modifier le formulaire sans avoir accès au serveur. IE 8 et Google Chrome embarquent des "outils pour les développeurs" qui permettent de modifier le code HTML de la page que l'on visite en temps réel. FF peut aussi faire de même avec son plugin Firebug.

La faille XSS : attention au code HTML que l'on reçoit !

La faille XSS (pour cross-site scripting) est aussi vieille que le web, et on la trouve encore sur de nombreux sites web, même professionnels !
C'est une technique qui consiste à injecter du code HTML contenant du javascript dans nos pages pour le faire exécuter à nos visiteurs.

Reprenons la page qui affiche le prénom qu'on lui envoie. Elle contient notamment le code suivant :
Si le visiteur décide d'écrire du code HTML à la place de son pré, cela fonctionnera très bien ! Par exemple, imaginons qu'il écrive dans le champ "prénom" le code :
<strong>Badaboum</strong>. Le code source HTML qui sera généré par PHP sera :

Et alors, s'il veut mettre son prénom en gras c'est son problème ?

Outre le fait qu'il peut insérer n'importe quel code HTML (et rendre notre page invalide), ce qui n'est pas le plus grave, il peut aussi ouvrir des balises de type <script> pour faire exécuter du code Javascript Tous les visiteurs qui arriveront sur cette page verront une boîte de dialogue Javasript s'afficher. Plutôt gênant.

Les choses deviennent vraiment critiques si le visiteur est assez malin pour récupérer nos cookies de cette façon. Les cookies stockent des informations sur notre sessio et parfois des informations plus confidentielles comme noter pseudonyme te noter mot de passe sur le site ! Il est possible de forcer le visiteur qui lira le code Javascript à nous envoyer tous les cookies qu'il a enregistrés pour notre site web, ce qui peut conduire au vol de son compte sur ce site. Ce qu'il faut retenir, c'est qu'il faut à tout prix éviter qu'un visiteur puisse injecter du code Javascript dans nos pages !

Résoudre le problème est facile : il faut protéger le code HTML en l'échappant, c'est-à-dire en affichant les balises (ou en les retirant) plutôt que de les faire exécuter par le navigateur.
Pour échapper le code HTML, il suffit d'utiliser la fonction htmlspecialchars qui va transformer les chevrons des balises HTML <> en respectivement &lt; et &gt;. Cela provoquera l'affichage de la balise plutôt que son exécution.
Le code HTML qui en résultera sera propre et prtégé car les balises HTML insérés par le visiteur auront été échappées :

Il faut penser à utiliser cette fonction sur tous les textes envoyés par l'utilisateur qui sont susceptibles d'être affichés sur une page web. Par exemple sur un forum, il faut penser à échapper les messages postés par les membres, mais aussi sur les pseudos(ils peuvent mettre du HTML dedans) ainsi que les signatures ! Bref, tout ce qui est affiché et qui vient à la base d'un visiteur, on doit penser à le protéger avec htmlspecialchars.

Si on préfère retirer les balises HTML que le visiteur a tenté d'envoyer plutôt que de las afficher, utiliser la fonction strip_tags

Grâce aux formulaires, on peut envoyer des fichiers. Nos visiteurs peuvent envoyer (on dit uploader) des fichiers sur notre site (images, programmes ou tout autre type de fichier).

Cette partie est un peu plus complexe

Là encore, ça se passe en 2 temps :

1. Le visiteur arrive sur le formulaire et le remplit (en indiquant le fichier à envoyer). Une simple page HTML suffit pour créer le formulaire.
2. PHP réceptionne les données du formulaire et, s'il y a des fichiers dedans, il les "enregistre" dans un des dossiers du serveur.

Attention : l'envoi du fichier peut-être un peu long si celui-ci est gros. Il faudra dire au visiteur d'être patient pendant l'envoi.

On commence par créer le formulaire permettant d'envoyer un fichier (une simple page HTML).
On verra ensuite comment traiter l'envoi du fichier côté serveur avec PHP.

Le formulaire d'envoi de fichier

A partir du moment où notre formulaire propose aux visiteurs d'envoyer un fichier, il faut ajouter l'attribut enctype="multipart/form-data" à la balise <form>.
Grâce à enctype, le navigateur sait qu'il s'apprête à envoyer des fichiers.

Ceci fait, on peut ajouter à l'intérieur du formulaire une balise permettant d'envoyer un fichier. C'est une balise très simple de type <input type="file" />.
Il faut penser toujours à donner un nom à ce champ de formulaire (grâce à l'attribut name) pour que PHP puisse reconnaître le champ après.
C'est suffisant. On peut ajouter d'autres champs plus classiques au formulaire (champ de texte, cases à cocher). On peut aussi proposer d'envoyer plusieurs fichiers en même temps.

Le traitement de l'envoi en PHP

Le formulaire pointe vers une page PHP qui s'appelle cible_envoi.php. Le visiteur sera donc redirigé sur cette page après l'envoi du formulaire.
C'est maintenant que ça devient important. Il faut écrire le code de la page cible_envoi.php pour traiter l'envoi du fichier.

Traiter l'envoi du fichier ? Le fichier étant envoyé sur le serveur, qu'est-ce qu'a besoin de faire PHP ?

En fait, au moment où la page PHP s'exécute, le fichier a été envoyé sur le serveur mais est stocké dans un dossier temporaire.
On doit décider si on accepte définitevent le fichier ou non. On peut par exemple vérifier si le fichier a la bonne extension.
Si le fichier est bon, on l'accepte définitivement grâce à la fonction move_uploaded_file.

Mais comment je sais si "le fichier est bon" ?

Pour chaque fichier envoyé, une variable $_FILES['nom_du_champ'] est créée. Ici, la variable s'appellera $_FILES['monfichier'].
Cette variable est un tableau qui contient plusieurs informations sur le fichier :

Variable	Signification
$_FILES['monfichier'] ['name']	Contient le nom du fichier envoyé par le visiteur.
$_FILES['monfichier'] ['type']	Indique le type du fichier envoyé. Si c'est une image gif par exemple, le type sera image/gif.
$_FILES['monfichier'] ['size']	Indique la taille du fichier envoyé. Attention : cette taille est en octets. Il faut environ 1 000 octets pour faire 1 Ko, et 1 000 000 octets pour faire 1 Mo. Attention, la taille de l'envoi est limitée par PHP. Par défaut, il est impossible d'uploader des fichiers de plus de 8 Mo.
$_FILES['monfichier'] ['tmp_name']	Juste après l'envoi, le fichier est placé dans un répertoire temporaire sur le serveur en attendant que votre script PHP décide si oui ou non il accepte de le stocker définitivement. Cette variable contient l'emplacement temporaire du fichier (c'est PHP qui gère ça).
$_FILES['monfichier'] ['error']	Contient un code d'erreur permettant de savoir si l'envoi s'est bien effectué ou s'il y a eu un problème, et si oui lequel. La variable vaut 0 s'il n'y a pas eu d'erreur.

Si on a mis un second champ d'envoi de fichier dans notre formulaire, il y aura une seconde variable $_FILES['nom_de_notre_autre_champ'] découpée de la même manière que ce tableau. $_FILES['nom_de_notre_autre_champ'] contiendra ainsi la taille du second fichier, et ainsi de suite.

Faisons les vérifications suivantes pour décider si on accepte le fichier ou non :

1. Vérifier tout d'abord si le visiteur a bien envoyé un fichier (en testant la variable $_FILES['monfichier'] avec isset) et s'il n'y a pas eu d'erreur d'envoi (grâce à $_FILES['monfichier']['error'])
2. Vérifier si la taille du fichier ne dépasse pas 1 Mo par exemple (environ 1 000 000 d'octets) grâce à $_FILES['monfichier']['size']
3. Vérifier si l'extension du fichier est autorisée (il faut interdire à tout prix que les gens puissent envoyer des fichiers PHP, sinon ils pourraient exécuter des scripts sur notre serveur !). Dans notre cas, nous autoriserons seulement les images (fichiers .png, .jpg, .jpeg et .gif).
   Nous analyserons pour cela la variable $_FILES['monfichier']['name'].

Faisons donc une série de tests dans notre page cible_envoi.php On commence par vérifier qu'un fichier a été envoyé en testant si la variable $_FILES['monfichier'] existe avec isset().
On vérifie dans le même temps s'il n'y a pas d'erreur d'envoi.
On ne veut pas que le fichier dépasse 1 Mo, soit environ 1 000 000 d'octets. On doit donc tester $_FILES['monfichier']['size'] :
On peut récupérer l'extension du fichier dans une variable grâce à ce code :
La fonction pathinfo renvoie un array contenant entre autres l'extension du fichier dans $infosfichier['extension']. On stocke ça dans une variable $extension_upload.
Une fois l'extension récupérée, on peut la comparer à un tableau d'extensions autorisées (un array) et vérifier si l'extension récupérée fait bien partie des extensions autorisées à l'aide de la fonction in_array().
Cela donne au final :
Si tout est bon, on accepte le fichier en appelant move_upload_file().
Cette action prend 2 paramètres :

• Le nom temporaire du fichier (on l'a avec $_FILES['monfichier']['tmp_name']).
• Le chemin est le nom sous lequel sera stocké le fichier de façon définitive. On peut utiliser le nom d'origine du fichier $_FILES['monfichier']['name'] ou générer un nom au hasard.

Ici, on posera le fichier dans un sous-dossier "uploads".
On gardera le même nom de fichier que celui d'origine. Comme $_FILES['monfichier']['name'] contient le chemin entier vers le fichier d'origine (C:\dossier\fichier.png par exemple), il nous faudra extraire le nom du fichier. On peut utiliser pour cela la fonction basename qui renverra juste "fichier.png".

Lorsqu'on mettra le script sur le net à l'aide d'un logiciel FTP, vérifier que le dossier "uploads" sur le serveur existe et qu'il a les droits d'écriture. Pour ce faire, sous Filezilla par exemple, faire un clic droit sur le dossier et choisir "Attributs du fichier". Cela permettra d'éditer les droits du dossire (on parle de CHMOD). Mettre les droits à 733, ainsi PHP pourra placer des fichiers uploadés dans ce dossier.

Ce script est un début, mais en pratique, il faudra sûrement encore l'améliorer. Par exemple, si le nom du fichier contient des espaces ou des accents, ça posera un problème une fois envoyé sur le web. D'autre part, si quelqu'un envoie un fichier qui a le même nom que celui d'une autre personne, l'ancien sera écrasé !

La solution consiste en général à "choisir" nous-mêmes le nom du fichier stocké sur le serveur plutôt que de se servir du nom d'origine. On peut faire un compteur qui s'incrémente : 1.png, 2.png, 3.jpg, etc.

Toujours être très vigilant sur la sécurité, on doit éviter que quelqu'un puisse envoyer des fichiers PHP sur notre serveur.

Pour aller plus loin, steduzero recommande de lire le tutoriel de DHKold sur l'upload de fichiers par formulaire