Principes de base

Formulaires HTML

Afin de réaliser une application web, il est impératif de se rappeler le fonctionnement des formulaires HTML utilisés pour la transmission des données. En effet, les formulaires permettent de créer une interactivité dans la mesure où ils constituent le principal moyen pour un utilisateur de transmettre des informations à l'application web distante. Rappelons qu'un formulaire n'est qu'un morceau de HTML formé de quelques éléments spécifiques qu'il faut connaître. Du côté navigateur, un formulaire fonctionne comme suit:

• Le navigateur charge le HTML comme il le fait d'habitude et lorsqu'il rencontre des éléments de formulaires, il crée des commandes qui permettent de saisir toutes sortes de données. Une commande est un bouton, un champ de saisie ou un menu déroulant, en bref un widget qui permet de saisir des données ou d'exprimer un choix.
  
• L'utilisateur saisit des données. Selon la nature de la commande, cette saisie intervient différemment: taper une ligne de texte dans un champ, cocher une case, appuyer sur un bouton, etc. Une fois les commandes complétées, l'utilisateur soumet le formulaire au serveur en cliquant sur un bouton spécifique, appelé commande de soumission. C'est un signal destiné au navigateur qui sait dès lors qu'il doit empaqueter les données et les envoyer au serveur.
  
• Lorsque le serveur a reçu les données, il les passe à l'application web destinée à les traiter. Le résultat de ce traitement est une toute nouvelle page HTML renvoyée au navigateur qui se charge de l'afficher sur l'écran de l'utilisateur.
  

La création d'un formulaire se fait à l'aide de l'élément <form>. Même si celui-ci accepte d'intégrer n'importe quel élément de bloc, il existe une série d'éléments dédiés. Chacun d'eux fournit une manière spécifique de saisir une information: champs, cases à cocher, menus déroulants, etc. Nous les avons déjà étudiés dans la section HTML-CSS et vous inviterons tout prochainement à les réutiliser dans un exercice de rappel. Revenons plutôt sur le code HTML du formulaire ci-dessus et observons comment s'affichent les éléments et leur contenu dans <form>:

L'élément <form> contient tous les éléments de construction du formulaire que nous avons précédemment étudiés et indique au navigateur où envoyer les données et quelle méthode employer pour le faire:

Quand vous connaissez l'URL de l'application web qui traite votre formulaire, il suffit de l'indiquer en valeur de l'attribut action de l'élément <form> comme l'indique l'illustration ci-dessus.

Rappelons que les éléments <input> d'un formulaire prennent un attribut name donnant une identification unique à chacun des champs créés:

Cet identifiant correspondra au nom de la variable transmise à l'application web qui en traitera la valeur. La valeur de cette variable correspondra aux données transmises par l'utilisateur dans le champs du formulaire associé. Plus précisément:

• Chaque champs d'un formulaire doit avoir son propre attribut name comme ci-dessous:
  
• Quand le formulaire est soumis, le navigateur associe chacune des données que vous avez entrées avec la variable dont vous avez donné le nom via l'attribut name et il envoie chaque attribut name avec sa valeur au serveur pour être traité:
  
  Notez qu'il est possible d'attribuer une valeur par défaut à la variable nommée par l'attribut name en utilisant l'attribut value. S'il est utilisé dans un élément <input> de type text, ce procédé aura pour conséquence d'afficher un texte par défaut dans la zone de texte du formulaire.

La création d'application web telle que l'application «concours.php» ci-dessus demande la maîtrise du langage PHP. Dans ce cours, nous pourrons obtenir un résultat analogue avec le langage Python grâce à l'utilisation du module CherryPy.

Méthodes de transmission de données

Pour envoyer des données au serveur, les navigateurs utilisent deux méthodes: POST et GET. La première méthode, POST, empaquette les variables du formulaire et les envoie discrètement au serveur, alors que la deuxième, GET, les ajoute à la fin de l'URL dans la barre d'adresse du navigateur au moment d'envoyer la requête au serveur.

Le meilleur moyen de comprendre ce que fait la méthode GET est de la voir en pleine action. En modifiant le code HTML du fichier formulaire.html contenant la structure du formulaire de commande comme le propose l'image de gauche ci-dessous, nous remarquons que toutes les données soumises au formulaire sont transmises directement dans l'URL transmises au serveur Web. Ces données sont les paramètres qu'utilisera l'application Web commander.php pour générer le code HTML de la page retournée en réponse au client par le serveur :

Nous pouvons remarquer dans l'URL ci-dessus que le chemin d'accès à l'application PHP est séparé des paramètres transmis à l'aide d'un point d'interogation (?) et que les paramètres s'enchaînent selon le format nom=valeur tout en étant séparés les uns des autres par une esperluette (&).

Si vous désirez que les internautes puissent ajouter dans leurs signets les pages qui sont les réponses aux requêtes, il est impératif de se servir de GET puisqu'il est impossible de le faire avec POST. Si, par contre, le rôle de l'application web est de traiter des commandes, il est souhaitable de ne pas pouvoir conserver la page dans les signets, sinon chaque visite générerait une nouvelle commande. Dans ce cas, l'utilisation du POST est requise. De même, il ne faut jamais utiliser GET lorsque les données du formulaire sont un tant soit peu confidentielles (numéro de carte de crédit, mot de passe,...): l'URL est en clair et si elle se trouve dans les signets, elle peut être vue par quelqu'un qui regarderait l'historique de navigation. Finalement, notons que les requêtes GET sont limitées à 256 caractères alors que POST n'a aucune limite de taille.