L'élément form est indispensable pour créer un formulaire. Nous étudierons plus en détail trois attributs importants de l'élément (action, method et enctype). Pour la liste de tous les attributs voir les spécifications techniques.

Un formulaire est toujours composé avec un élément form qui contient :

Pour fonctionner correctement, l'élément form utilise plusieurs attributs qui vont définir :

Visuellement, ces attributs n'ont aucun effet sur le formulaire dans la page.

L'attribut action

L'attribut action définif l'URL à laquelle seront envoyées les données saisies. Cette adresse n'est jamais une page HTML puisque HTML ne sait pas faire du traitement de données. Il s'agit le plus souvent de l'adresse d'un programme écrit dans un langage de script comme PHP, ASP, python, ruby, etc.

Exemple : envoi à un script PHP

Quand vous envoyez le formulaire en cliquant sur le bouton "S'authentifier", vous obtenez l'affichage d'un message qui vous montre ce qui est envoyé au serveur Web dont l'adresse est definie par la valeur de l'attribut action. Ce traitement particulier est fait par le tutoriel (et un script JavaScript) pour vous montrer ce qui part sur le réseau quand on soumet un formulaire. L'envoi réel est ensuite stoppé par le tutoriel.

Si l'attribut action est absent de l'élément form, le formulaire est envoyé à l'URL de la page.

L'attribut method

L'attribut method définit comment le contenu saisi va être envoyé au serveur. L'envoi peut se faire selon 2 méthodes : POST ou GET. Le choix de l'une ou l'autre des méthodes est de la plus haute important car il influe sur la sécurité et la confidentialité du transfert, ainsi que sur la taille du contenu envoyé.

La méthode GET envoie les données du formulaire à la suite de l'URL contenue dans l'attribut action. Les données sont directement lisibles (et modifiables) dans la zone d'adresse du navigateur.
Vous avez déjà vu des données envoyées de cette façon qui se présentent sous la forme suivante :
http://www.monsite.fr/page.php?zone1=abc&zone2=123
Google utilise ce type de méthode pour envoyer la recherche à ses serveur :
https://www.google.fr/search?q=comment+fonctionne+le+web&ie=utf-8&oe=utf-8&rls=org.mozilla:en-US:official&client=firefox-a&gws_rd=cr&ei=DRCvUseUN8qVhQfzwICwBA
On voit que la recherche est envoyée à https://www.google.fr/search et que les éléments du formulaire sont q (sans doute pour "question") suivi du texte de la recherche (ici "comment fonctionne le web"), suivi de multiple zones qui n'apparaissaient pas à l'écran (zones cachées) et qui permettent à Google de faire des statistiques (savoir par exemple quel navigateur est utilisé client=firefox-a).
La méthode GET qui envoie les données saisies dans l'URL est généralement à éviter car l'URL formée par la soumission du formulaire peut ensuite être modifiée directement. Dans une URL de recherche de Google, vous pouvez par exemple remplacer ce qui suit le q= par n'importe quel autre terme, appuyer sur la touche "Entrée" et tout se passe comme si vous aviez utilisé le formulaire "officiel" de Google. Il est évident que dans un autre type de site, comme un site de commerce, il n'est pas possible d'utiliser cette méthode qui donnerait par exemple tout latitude pour modifier les prix, ou qui laisserait passer en clair sur le réseau des numéros de cartes bleues.

La méthode POST place les données du formulaire dans le corps du message HTTP envoyé au serveur Web. De cette façon, les informations ne sont pas visibles directement, et il n'existe pas vraiment de limite dans le nombre de caractères qui peuvent être transférés, ou alors une limite très grande (par exemple 8 mo de données en réception pour PHP). Un rappel sur les URL : le nombre maximal de caractères n'est pas fixé dans les spécifications techniques, mais la limite est de 2083 à cause d'Internet Explorer. On est donc limité dans ce qu'on peut envoyer comme données avec la méthode GET.
D'une façon générale privilégiez la méthode POST pour l'envoi de vos formulaires au serveur.

message HTTP d'une requête GET

La figure 1 représente le message HTTP envoyé par le navigateur quand il fait une requête avec la méthode GET. Le message contient uniquement des en-têtes HTTP et les couples nom de zone / valeur saisie sont situés dans l'URL, donc directement lisible quand cette URL sera affichée dans la barre d'adresse du navigateur.

message HTTP d'une requête POST

La figure 2 représente le message HTTP envoyé par le navigateur quand il fait une requête avec la méthode POST. Le message contient des en-têtes HTTP et un corps, constitué par les couples nom de zone / valeur saisie. A aucun moment ce corps ne sera visible et modifiable par l'utilisateur.

Si l'attribut method est absent de l'élément form, le formulaire est envoyé avec la méthode GET. Je vous conseille donc de toujours préciser cet attribut comme dans l'exemple suivant.

Exemple : méthode POST

L'attribut enctype

L'attribut enctype définit l'encodage qui sera utilisé pour transmettre les donnée saisies. On ne parle pas ici de l'encodage du fichier HTML (cf élément meta ), mais de l'encodage dans le corps du message HTTP envoyé au serveur. En effet, certains caractères sont des caractères réservés (cf URL - caractères réservés qui ne peuvent pas être transmis tel que et nécessite donc un encodage particulier. L'envoi d'un fichier sur le serveur nécessite aussi que le corps du message HTTP soit construit d'une certaine façon, et c'est l'attribut enctype qui permettra de le spécifier.

L'attribut enctype peut avoir 3 valeurs précises :

  • text/plain : ne jamais utilisé
  • application/x-www-form-urlencoded : encodage à utiliser pour le transfert de données alpha-numériques
  • multipart/formdata : encodage à utiliser pour l'envoi de fichier sur le serveur.

Si l'attribut enctype est absent de l'élément form, l'encodage utilisé est application/x-www-form-urlencoded et c'est parfait dans la majorité des cas.
Je vous conseille de préciser l'encodage uniquement si votre formulaire fait un envoi de fichier et d'utiliser
enctype="multipart/formdata" comme dans l'exemple suivant.

Exemple : envoi de fichier