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 :

- toutes les zones de saisie (éléments input, select et textarea),
- un ou plusieurs boutons de soumission qui vont permettre d'envoyer les informations saisies au serveur (élément input avec attribut `type="submit"`),
- tous les éléments de groupement et de présentation propres aux formulaires (fieldset, legend

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

- où sont envoyées les données saisies (`action`),
- comment sont envoyées les données saisies (`method`),
- quel encodage est utilisé pour transmettre les données (`enctype`).

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
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Envoi à un script PHP</title> <link rel="stylesheet" href="styles/form02.css"> </head> <body> <form action="dossier/login.php"> <fieldset> <legend>Authentification</legend> <div> <label for="zNom">Nom</label> <input type="text" id="zNom" name="txtNom"> </div> <div> <label for="zPasse">Mot de passe</label> <input type="password" id="zPasse" name="txtPasse"> </div> <div> <label for="zCon">Restez connecté</label> <input type="checkbox" id="zCon" name="chkCon"> </div> </fieldset> <fieldset> <input type="reset" value="Effacer" name="btnEffacer"> <input type="submit" value="S'authentifier" name="btnAuthentif"> </fieldset> </form> </body> </html>

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
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Méthode POST</title> <link rel="stylesheet" href="styles/form02.css"> </head> <body> <form action="dossier/login.php" method="POST"> <fieldset> <legend>Authentification</legend> <div> <label for="zNom">Nom</label> <input type="text" id="zNom" name="txtNom"> </div> <div> <label for="zPasse">Mot de passe</label> <input type="password" id="zPasse" name="txtPasse"> </div> <div> <label for="zCon">Restez connecté</label> <input type="checkbox" id="zCon" name="chkCon"> </div> </fieldset> <fieldset> <input type="reset" value="Effacer" name="btnEffacer"> <input type="submit" value="S'authentifier" name="btnAuthentif"> </fieldset> </form> </body> </html>

### 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
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Envoi de fichier</title> <link rel="stylesheet" href="styles/form02.css"> </head> <body> <form action="dossier/upload.php" method="POST" enctype="multipart/formdata"> <fieldset> <legend>Fichier à télécharger</legend> Sélectionnez un fichier<br> <input type="file" name="ficNom"> </fieldset> <fieldset> <input type="submit" value="Envoyer" name="btnEnvoi"> </fieldset> </form> </body> </html>