Formulaires dans une page web

Pour entrer des informations, les pages web peuvent proposer des éléments de formulaires : boutons à cliquer, champ d'entrée, etc...

Les informations entrées peuvent ensuite être envoyées au serveur pour un autre traitement ( côté "serveur" ) : recherche dans une base de données, connexion à un service, etc..., le serveur renvoyant alors une réponse "personnalisée" en fonction de ces données envoyées. On parle dans ce cas de pages "dynamiques", c'est à dire dont le contenu peut changer selon les circonstances de leur consultation.

Pages dynamiques

Dans ce cas, un traitement supplémentaire est nécessaire de la part du serveur; le processus est le suivant :

dans cette situation, la requête porte sur un fichier dont l'extension n'est plus .html mais .php car il contient du code écrit dans un langage de script appelé PHP.
le serveur alors "passe la main" à ce programme qui va s'exécuter sur ce serveur;
ce programme exécute la requête, traite les informations, et génère un code HTML qui est alors renvoyé au client par le serveur.
le client interprète ce code HTML pour afficher la page.

Le travail est donc "partagé" entre le client et le serveur dans ce processus...

Le script de traitement peut être écrit dans différents langages grâce à l’utilisation de différentes bibliothèques logicielles additionnelles : le framework Flask permet ainsi de programmer côté serveur en Python !

C'est donc toujours du HTML/CSS/JS qui est envoyé au client, mais il est ici généré "à la volée" en fonction de la requête : cela permet donc d'envoyer des pages "dynamiques" et non plus "statiques", c'est à dire identiques à chaque consultation.

Nous n'entrerons pas dans les détails de la programmation PHP, car, d'une part, le programme de NSI ne l'exige pas, et que, d'autre part, il s'agit d'un langage qui ne peut être justement exécuté que sur un serveur web, ce qui n'est pas le cas des PC sur lesquels vous travaillez : vous ne pourriez donc jamais exécuter votre code PHP, ce qui est quand même d'un intérêt assez limité...

Voila cependant une illustration du principe ci-dessus.

La page que vous êtes en train de lire correspond à un fichier dont l'extension est .php ( regardez son URL dans la barre d'adresse du navigateur ) : le fichier qui décrit la page est donc écrit en PHP ? Mais pourtant, si je regarde le code source de la page, c'est bien du HTML "pur" ! Je n'y comprends rien....

En réalité, sur le serveur, le fichier est bien écrit ( en partie ) en PHP; mais avant d'envoyer ce fichier sur le client, le serveur a exécuté le code pour le "remplacer" par du HTML : c'est comme ça par exemple qu'est généré le code HTML du bandeau en haut de page et celui du menu mobile sur la gauche de la page :

Le fichier sur le serveur : du code PHP est présent

Le code source de la page sur le client : le code PHP a été remplacé par du HTML !

Ne croyez pas cependant que PHP ne permet que de générer du HTML : c'est un "vrai" langage de programmation, c'est lui qui traite par exemple les bases de données des plus grands sites web.

La conséquence de tout ceci est qu'il est impossible de lire le code PHP stocké sur un serveur distant : ce dernier exécute toujours le code avant l'envoi, ce qui fait que le PHP n'apparaît jamais...

Construction d'un formulaire

Code HTML

Un formulaire se bâtit dans le fichier HTML de la page : la balise correspondante est la balise <form> :


	<form id="form1" name="mon_formulaire">
	
		................
		éléments de formulaires
		................
		
	</form>

Il est souvent utile de donner un id et/ou nom à un formulaire :

il peut y avoir plusieurs formulaires dans une même page, il faut donc pouvoir les différencier.
Le nom est indispensable si on veut envoyer les informations entrées à un serveur ( voir ci-dessous )

Éléments de formulaire

Les éléments que l'on peut trouver dans un formulaire dépendent des informations que l'on veut demander à l'utilisateur; leurs balises, à placer entre les balises <form>, sont par exemple :

Bouton à cliquer

Un type particulier de bouton est celui qui permet de soumettre le formulaire au serveur ( c'est à dire lui envoyer les informations entrées ) :


	<input type="submit" name="envoi" value="ENVOI">

Dans ce cas, le libellé du bouton correspond à la propriété value de la balise ( si cette propriété n'est pas renseignée, c'est le texte par défaut "Envoyer" qui s'affiche ).

Il existe également le bouton qui permet de réinitialiser un formulaire :


	<input type="reset" name="remise_a_zero" value="RAZ">

Ces deux boutons sont généralement placés à la fin du formulaire.

Champ d'entrée

Pour un champ d'entrée de texte :


	<label>Veuillez compléter ce champ : <input type="text" name="un_texte" placeholder="Entrez un truc...""></label>

Veuillez compléter ce champ :

la balise <label>, parente de la balise de l'élément de formulaire, permet de lui associer un libellé.
la propriété placeholder permet de donner à l'utilisateur une indication sur l'information à entrer

Pour un champ d'entrée de valeur numérique :


	<label>Entrez la valeur : <input type="number" name="une_valeur" min="0" max="20" step="0.5"></label>

Entrez la valeur :

Les propriétés min, max et step permettent respectivement de définir le minimum, le maximum et le pas de variation de l'intervalle dans lequel la valeur demandée doit se trouver.

Cases à cocher

Un ensemble de case, indépendantes les unes des autres, qui permettent de choisir une ou plusieurs options :


	<label><input type="checkbox" name="capacité" value="1">8 GB</label><br>
	<label><input type="checkbox" name="capacité" value="2">16 GB</label><br>
	<label><input type="checkbox" name="capacité" value="3">32 GB</label><br>
	<label><input type="checkbox" name="capacité" value="4">64 GB</label><br>

8 GB
16 GB
32 GB
64 GB

la propriété value permet d'associer à chaque case sélectionnée une valeur, information qui pourra alors être envoyée au serveur
on remarque que les cases doivent avoir le même nom pour qu'elles soient associées à la même information demandée ( ici, le choix d'une ou plusieurs capacité(s) de stockage )

Boutons radio

Dans ce cas, les différentes options s'excluent mutuellement : la sélection d'une seule est possible.

C'est ce qui est par exemple utilisé dans les QCM d'entraînement que vous avez pu faire sur ce site...


	<label>A<input type="radio" name="q1" value="1">C'est ma dernière réponse, Jean-Pierre</label><br>
	<label>B<input type="radio" name="q1" value="2">J'appelle un ami</label><br>
	<label>C<input type="radio" name="q1" value="3">La réponse C</label><br>
	<label>D<input type="radio" name="q1" value="4">Obi-Wan Kenobi</label><br>

AC'est ma dernière réponse, Jean-Pierre
BJ'appelle un ami
CLa réponse C
DObi-Wan Kenobi

Là-aussi, les boutons radio doivent avoir le même nom ( dans le cas contraire, leur sélection multiple serait possible ! )

De nombreux autres éléments de formulaire existent; vous trouverez ici un mémento sur les éléments de formulaires ( et d'autres informations qui vous serviront par la suite ).

A côté de ces éléments de formulaire, il est bien sûr toujours possible d'inclure entre les balises <form> d'autres éléments HTML "standards" : paragraphe, image, tableau, etc...

Envoyer des informations à un serveur

Le simple fait d'entrer une adresse dans la barre d'adresses d'un navigateur correspond à un envoi de données au serveur; mais c'est généralement grâce à l’utilisation d'un formulaire que l'on va pouvoir lui envoyer des informations complémentaires.

Voila par exemple ci-dessous un petit formulaire, et le code HTML correspondant :


	<form name="formul" action="exemple_get.php" method = "get">
		<p><label>Entrez votre nom : <input type="text" name="nom"></label></p>
		<p><label>Entrez votre prénom : <input type="text" name="prenom"></label></p>
		<p>Quelle est votre couleur préférée ?</p>
		<p>
		<label><input type="radio" name="q1" value="1">Rouge</label><br>
		<label><input type="radio" name="q1" value="2">Bleu</label><br>
		<label><input type="radio" name="q1" value="3">Vert</label><br>
		<label><input type="radio" name="q1" value="4">Rose fushia</label><br>
		</p>
		<input type="submit" value="Valider">
	</form>

ligne 2 : dans la balise <form>, il faut renseigner deux propriétés :
- la propriété action correspond à l'URL du script PHP qui prendra en charge les données envoyées. ( ici, il s'agit d'un fichier local au serveur, situé dans le même répertoire que la page elle-même )
- la propriété method correspond à la méthode pour envoyer les données ( voir paragraphe suivant ) : ici, la méthode GET
ligne 12 : on trouve un bouton de type submit qui, lorsqu'il sera cliqué, enverra toutes les données du formulaire au serveur.

Méthodes d'envoi de données à un serveur

Il existe deux méthodes pour cela selon le protocole HTTP :

La méthode GET

Utilisation

Elle est utilisée lorsque l'on veut envoyer de petites quantités de données au serveur ( dans la pratique, on se limite à environ 2000 caractères ), et que ces données n'entraînent pas de modification de celles de la page : c'est le cas par exemple lorsqu'on fait une recherche par mot-clé à partir d'un moteur de recherche.

Avec cette méthode, les données seront ajoutées, directement dans l'URL. Celle-ci est alors composée du nom de la page ou du script à charger avec les données "empaquetées" dans une chaîne. Les données sont séparées de l'adresse de la page par le code ? et entre elles par le code & :


	http://www.lapagequiminteresse.fr?var1=data1&var2=data2&var3=data3

var1, var2, var3 correspondent aux noms ( propriété name ) des éléments de formulaires; data1, data2, data3 aux données entrées dans ces éléments par l'utilisateur.

Exemples

Pour continuer avec l'exemple précédent, regardez la barre d'adresses de la page de résultats d'un moteur de recherche après que vous ayez lancé une recherche : les mots-clés apparaissent après l'adresse de la page selon la forme ci-dessus, indiquant qu'ils ont été envoyés selon la méthode GET lors de l'appui sur le bouton Rechercher ( ou OK...)

Lancement de la recherche

La page de résultats

Vous pouvez également reprendre l'exemple du petit formulaire du paragraphe précédent, qui utilise la méthode GET : étudier l'URL dans la barre d'adresses de la page de réponse; on y voit bien les données transmises du nom, du prénom et de la couleur sélectionnée.

Limites de la méthode

on l'a dit, la quantité d'informations à transmettre est limitée du fait que les serveurs et les navigateurs imposent généralement une taille limite aux URL; c'est donc généralement un maximum de 2000 caractères que l'on peut transmettre.
les informations circulent en clair puisqu'elles sont directement lisibles dans l'URL : pas question donc d'envoyer un mot de passe à un serveur avec cette méthode...

La méthode POST

Cette méthode n'est plus limitée en taille : on peut envoyer une quantité quelconque de données au serveur, mais celles-ci n'apparaissent plus directement dans l'URL : elles sont incluses dans le corps global de la requête et sont donc "invisibles" pour l'utilisateur. Même si elles restent modifiables par quelqu'un "qui s'y connaît", la méthode POST apporte donc un niveau supplémentaire de sécurité par rapport à la méthode GET.

On utilise cette méthode lorsque les données envoyées doivent modifier celles sur le serveur : c'est le cas par exemple lorsqu'on veut y enregistrer des informations.

Comme indiqué dans la page d'introduction de ce cours, nous n'étudierons pas la manière dont le serveur génère la réponse à partir des données envoyées par le client.

Ceci fait en effet appel à des connaissances sur le langage PHP qui ne sont pas au programme.

Application

Voila une petite application que vous allez élaborer de A à Z.

Il s'agit d'un "mini-chat" qui va vous permettre de discuter entre vous, à condition que vous écriviez votre propre formulaire d'envoi de message !

Le formulaire

Pas besoin de faire compliqué; il devra contenir ( attention à respecter le nom des propriétés name ) :

un champ d'entrée pour entrer votre login ( de propriété name = "pseudo" )
un champ d'entrée pour entrer votre mot de passe ( ( de propriété name = "password" )
un champ d'entrée pour écrire votre message ( de propriété name = "message" )
un ensemble de boutons radio ( de propriété commune name ="couleur" ) précisant la couleur dans laquelle le message devra être affiché ( valeur à indiquer comme propriété CSS valide, sinon l'affichage sera en noir par défaut )
un bouton pour soumettre votre formulaire

Un peu de CSS pour embellir le tout, et votre formulaire pourrait ressembler à ça :

Vous utiliserez votre identifiant et votre mot de passe NSI pour pouvoir poster vos messages ( ils seront sinon supprimés...)

Envoi des données

Pour le traitement des données, votre formulaire devra les envoyer avec les propriétés suivantes :

action = "http://192.168.221.1/~web/premiere2/chat.php"
method = "post"

Réponse du serveur

Le serveur vous répondra en affichant la liste des messages déjà envoyés, avec le login de leur émetteur.

Pour renvoyer un nouveau message, il faudra que vous reveniez en arrière vers la page de votre formulaire.

Bonne discussion ! Vous pourrez revenir quand vous voudrez sur ce chat, mais il ne fonctionnera que sur le réseau du lycée ( et attention, tous vos messages restent stockés...).

Lien vers les RÉPONSES

( Pour ceux que ça intéresse, ce mini-chat fonctionne ainsi : un script PHP récupère les données envoyées de votre formulaire, et les écrit dans une base de données stockée sur le serveur; un autre script consulte ensuite toutes les 2s les messages stockés et construit le code HTML de la page de réponse, celle où s'affichent les messages.)

Formulaires et sécurité

Le traitement des données envoyées à un serveur doit reposer sur la devise : "Ne jamais faire confiance à l'utilisateur.".

Cela se traduit par :

il faut toujours vérifier la cohérence des données entrées : valeurs saisies, champs tous complétés, etc...Même si il n'a pas d'intention malveillante, il est impossible d'être sur que l'utilisateur va se comporter comme le concepteur du site l'a prévu. Un site doit donc être à ce titre "robuste", il faut prévoir toutes les éventualités !
l’utilisateur peut avoir des intentions malveillantes, et chercher à "pirater" ou "hacker" le site : il faut donc protéger ce dernier face à ces attaques.

Plusieurs failles, c'est à dire de "portes d'entrée" pour un pirate, peuvent exister sur un site; un exemple "classique" est la faille XSS ( = Cross Site Scripting ).

Revoilà le petit formulaire du début de ce chapitre :

Mais cette fois, mettez vous à la place d'un pirate, et rentrez dans un des champ de saisie, non pas une donnée valide, mais directement du code HTML et/ou JavaScript; par exemple :


<script>document.body.style.background ="red";alert("Vous vous êtes fait pirater !")</script>

...et soumettez le questionnaire... Vous avez vu ? Vous avez fait faire au site une action pour laquelle il n'est pas prévu : exécuter du code JS ! On parle d'attaque par injection de code dans cette situation.
Ici, il s'agit d'une action plus ennuyeuse que dangereuse, mais on peut imaginer des codes bien plus malveillants qui chercheraient à tromper l’utilisateur, lui extorquer des informations, etc... D'où le nom de la faille : "du script venant d'un site qui n'est pas celui à l'origine".

Il va de soi que cette faille ne sera "ouverte" que le temps de la séance : inutile de ré essayer chez vous, elle aura bien entendu entre-temps été "comblée" !...

Le premier formulaire au début de ce chapitre est protégé contre cette attaque : une fonction spéciale du script PHP qui traite les données envoyées "échappe" les balises HTML du code malveillant, c'est à dire les affiche seulement sans les interpréter : le code JS n'est alors pas exécuté.
Vous pouvez essayer d'attaquer le premier formulaire de cette façon : ça ne marche pas !