Les Formulaires Web

La structure d'un formulaire

Les formulaires permettent à l'utilisateur d'envoyer des données au serveur. Ils reposent sur trois éléments essentiels : la balise conteneur, les champs de saisie et le bouton d'envoi.

<form> : Délimite la zone du formulaire.
<input> : Champ de saisie (texte, mot de passe, etc.).
<button type="submit"> : Le bouton qui déclenche l'envoi des données.

Exemple :

<form>
  <label for="user">Nom d'utilisateur :</label>
  <input type="text" id="user" name="username">

  <label for="pass">Mot de passe :</label>
  <input type="password" id="pass" name="password">

  <button type="submit">Se connecter</button>
</form>

Ergonomie

Un clic sur le texte précédant un champ de saisie permet d'activer le champ. Cela fonctionne car dans le code, l'attribut for de la balise <label> est le même que l'attribut id de la balise <input>

Transmission des données

Pour que le serveur puisse traiter les informations, le formulaire utilise deux attributs clés :

action : L'URL de la page qui va recevoir les données.
name : L'identifiant de la donnée envoyée (on peut voir cela comme le nom de la variable transmise).

Lors de la validation, le navigateur construit une chaîne de caractères associant l'attribut name et la valeur saisie par l'utilisateur.

Les méthodes d'envoi : GET et POST

L'attribut method définit comment les données transitent sur le réseau. Il y a deux méthodes possibles :

GET : C'est le comportement par défaut. Les donnes sont transmises par l'URL, après le symbole "?".
POST : Les données ne sont pas visibles dans l'URL, mais sont transmises dans la requête HTTP.

POST et sécurité

Avec la méthode POST, les données ne sont pas directement lisibles dans l'URL, ce qui permet d'éviter d'afficher directement un mot de passe, ou de le retrouver dans l'historique. Cependant, les données sont visibles dans la requête et ne sont pas chiffrées. On peut donc tout à fait récupérer un mot de passe transmis via la méthode POST si le protocole utilisé n'est pas https.

À retenir

Les formulaires html permettent de demander des données à l'utilisateur et de les transmettre.
On utilise la balise <form>, avec deux attributs : action définit la page où sont envoyées les données, et method définit la façon dont on les envoie.
La méthode GET transmet les données par l'URL, POST les transmet dans la requête HTTP.
Dans le formulaire, les balises <input> permettent d'insérer des champs de saisie de différents types pour l'utilisateur.