Devenez interactifs !

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. Ouvrez le fichier formulaire.html et effectuez le changement suivant puis enregistrez le fichier et actualisez la page. Vous remplirez ensuite le formulaire et le soumettrez au serveur. Observez l'URL:

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.

Mise en page d'un formulaire

Avant de mettre en ligne un formulaire, il convient de lui donner un peu de style. Habituellement, la présentation d'un document HTML se fait à l'aide de feuilles de style CSS. Néanmoins, il arrive parfois que certains webmaster recourt aux tableaux pour positionner des éléments HTML dans une page surtout si ceux-ci appartiennent à un formulaire. Cette pratique a longtemps été utilisée pour construire toutes les mises en page des documents HTML avant l'avénement du CSS. De nos jours, les tableaux ne doivent plus servir aux mises en pages car cette méthode est dépassée. Seule la mise en page des formulaires se fait encore à l'aide de tableaux car ils permettent de les rendre plus lisibles en alignant les champs et leur nom de manière cohérente et structurée.

Autres éléments d'un formulaire

Nous avons vu presque tous les éléments qui peuvent composer un formulaire. Il en reste néanmoins quelques-uns qui peuvent se révéler utiles:

• Fieldset et légende
  Quand un formulaire prend de l'ampleur, il est approprié de regrouper les éléments d'un même jeu de commandes. Le HTML propose un élément dédié pour regrouper des éléments <input>: l'élément <fieldset>. Cet élément fait appel à un second élément appelé <legend> permettant de donner un nom au groupe:
  
• Mots de passe
  L'élément <input> de type password est équivalent à l'élément <input> de type text, sauf que ce que vous y tapez est masqué. Cet élément est utilisé pour saisir un mot de passe, un code bancaire, etc., sans que personne ne puisse le voir au moment où vous le tapez. Néanmoins, n'oubliez pas que les données du formulaire ne sont pas envoyé de manière sécurisée à l'application web sauf si la connexion l'est. Nous en reparlerons lorsque nous étudierons la sécurité d'un réseau:
  
• Envoyer un fichier
  Si vous devez envoyer un fichier à l'application web, vous vous servirez de l'élément <input> de type file. Dans ce cas, l'élément <input> crée une commande qui vous permet de sélectionner un fichier sur votre disque dur et de l'envoyer au serveur avec le reste des données. Il faudra bien entendu que l'application web soit développée en conséquence et utiliser la méthode POST:
  
• Sélection multiple
  En ajoutant l'attribut multiple avec une valeur multiple à l'élément select, vous obtiendrez un menu à sélection multiple. Ce menu montrera à l'écran tous les choix possibles (avec au besoin une barre de défilement). Pour effectuer un choix multiple, il vous suffira alors d'appuyer sur la touche Ctrl (Windows) ou Commande (Mac) de votre clavier pendant la sélection:
  

Notez finalement que tous ces éléments sont listés sur le site de référence www.w3schools.com.