Cours HTML / Structure d’un formulaire et différence entre GET et POST

Un form regroupe des contrôles dont les valeurs sont soumises par les utilisateurs. Pour comprendre où vont les données, distinguez les attributs name des contrôles, la destination dans action, et la méthode de requête dans method. HTML peut construire l'interface de saisie, mais enregistrer ou rechercher des données nécessite un gestionnaire côté serveur.

Construisez un petit formulaire de recherche

L'exemple accepte un terme de recherche. Remplacez /search par un véritable point de terminaison avant de l'utiliser sur un site. Comparez les attributs for et id ainsi que le nom de la clé de soumission dans Connecter correctement les étiquettes et les entrées.

<form action="/search" method="get">
  <label for="keyword">Terme recherché</label>
  <input id="keyword" name="q" type="search">
  <button type="submit">Rechercher</button>
</form>

L'étiquette for correspond à l'entrée id, donnant un nom au champ. name="q" identifie la valeur dans les données soumises. Saisir « HTML » produit généralement une URL contenant ?q=HTML. Un id sans name peut toujours connecter une étiquette, mais la valeur du champ n'est normalement pas incluse dans la soumission.

action nomme la destination ; method choisit comment le navigateur envoie les valeurs. Si les deux sont omis, le formulaire est envoyé à l'URL actuelle en utilisant GET par défaut. Essayez un terme avec des espaces ou des lettres non ASCII : la barre d'adresse peut afficher une représentation encodée de ces caractères. Il s'agit d'un format de transport, et non d'un signe que l'entrée a disparu.

Choisissez GET ou POST

GET place les données du formulaire dans la chaîne de requête de l'URL. Il convient pour les recherches et filtres que les utilisateurs peuvent mettre en favori ou partager. Ne l'utilisez pas pour envoyer des mots de passe ou d'autres valeurs sensibles, car les données sont visibles dans l'URL. POST envoie les données du formulaire dans le corps de la requête et est couramment utilisé pour les opérations qui modifient l'état du serveur, comme la création d'un compte ou l'envoi d'un message. POST ne chiffre pas les données par lui-même ; les soumissions sensibles nécessitent HTTPS et une gestion appropriée côté serveur.

<form action="/contact" method="post">
  <label for="message">Message</label>
  <textarea id="message" name="message"></textarea>
  <button type="submit">Envoyer</button>
</form>

Le chemin /contact est illustratif ; sans un gestionnaire il peut retourner une erreur. Pour essayer GET vers le document actuel, partez du premier formulaire, conservez method="get" et retirez son attribut action. Un slash initial est relatif à la racine du site, et non à un point de terminaison fonctionnel dans un fichier local. Ne soumettez pas de vraies informations personnelles à un point de terminaison exemple.

Inspectez les données avant de les envoyer

Enregistrez l'exemple complet sous inspect-form.html. Omettre action cible le document actuel. Une action écrite explicitement doit être une URL valide et non vide, donc omettez l'attribut au lieu d'écrire action="" pour signifier la page actuelle.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Exercice sur les données de formulaire</title>
</head>
<body>
  <h1>Examiner les champs envoyés</h1>
  <form id="inspect-form" method="get">
    <p><label for="query">Terme recherché</label>
      <input id="query" name="q" value="HTML" required></p>
    <p><label for="limit">Nombre maximal de résultats</label>
      <input id="limit" name="limit" value="5" readonly></p>
    <p><label for="coupon">Coupon indisponible</label>
      <input id="coupon" name="coupon" value="DEMO" disabled></p>
    <p><label><input type="checkbox" name="news" value="yes" checked> Actualités</label></p>
    <button type="submit">Examiner les valeurs dans l’URL</button>
  </form>
</body>
</html>

Après avoir ouvert le fichier, exécutez cette ligne dans la Console des outils de développement pour inspecter les noms et valeurs des champs actuels. FormData est une interface de programmation web (API) qui construit une liste de paires nom–valeur issues du formulaire. Cette commande en elle-même n'envoie pas les données sur le réseau et ne lance pas la validation des contraintes.

Array.from(new FormData(document.getElementById("inspect-form")).entries())

[["q", "HTML"], ["limit", "5"], ["news", "yes"]]

Initialement, le limit en lecture seule est inclus et le coupon désactivé est omis. Décochez Actualités et son entrée disparaît également. Effacer le terme de recherche vous permet toujours d'inspecter une valeur q vide, mais le bouton de soumission déclenche la validation requise. Comparez la construction de la liste de données avec les vérifications interactives de soumission.

Sur une page servie par un serveur, ouvrez Réseau, soumettez, et inspectez la requête correspondante. Un document local file:// n'est pas équivalent à un GET ou POST HTTP contre un serveur. Un 404 ou 405 peut refléter la destination ou sa méthode prise en charge ; supprimer les noms de champs ou les attributs de validation ne résout pas ce problème.

Règles des attributs de soumission HTML · Constructeur FormData MDN

Pourquoi un champ pourrait-il manquer dans les données soumises ?

Un contrôle désactivé ne peut pas être modifié et n'est pas soumis. Si vous avez besoin qu'une valeur non modifiable soit soumise, vérifiez si ce type de contrôle prend en charge readonly. Seules les cases à cocher et les boutons radio cochés contribuent à leurs valeurs. Un téléchargement de fichier nécessite des paramètres de formulaire supplémentaires et un traitement côté serveur ; ajouter uniquement un champ de fichier à cet exemple ne suffit pas. Testez les contraintes qui bloquent la soumission dans Validation de formulaire avec Obligatoire, Longueur et Limites de Plage.

Si le résultat est inattendu, vérifiez d'abord le name de chaque contrôle, puis si un contrôle sélectionnable est coché, puis si l'URL et la méthode correspondent au serveur. Le panneau Réseau d'un navigateur peut afficher la requête même lorsque le serveur répond avec une erreur. Une requête correcte n'implique pas que le serveur ait enregistré la valeur. Voir la référence du formulaire MDN pour les détails de la soumission.