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 :
type="submit"),Pour fonctionner correctement, l'élément form utilise plusieurs attributs qui vont définir :
action),
method),enctype).
Visuellement, ces attributs n'ont aucun effet sur le formulaire dans la page.
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.
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 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.
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.
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.
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ériquesmultipart/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.