Liens vs Formulaires dans les Requêtes HTTP
Chaque fois qu’un utilisateur clique sur un lien de navigation ou soumet une requête de recherche, le navigateur effectue une requête HTTP. Mais quel élément HTML déclenche cette requête — et comment — importe bien plus que la plupart des développeurs ne le réalisent. Choisir entre <a> et <form> n’est pas qu’une simple préférence de balisage. C’est une décision sémantique qui affecte le comportement, la sécurité et la justesse du code.
Points Clés à Retenir
- Les liens (
<a>) servent à la navigation et déclenchent généralement des requêtes GET. Les formulaires (<form>) servent à la soumission de données et supportent à la fois GET et POST. - Utilisez des formulaires GET lorsque la saisie utilisateur façonne l’URL (comme les requêtes de recherche) et des formulaires POST lorsque l’action modifie l’état du serveur (comme la création de compte).
method="link"est du HTML invalide — les navigateurs basculent silencieusement vers GET, ce qui peut entraîner un comportement inattendu.- Les formulaires HTML ne supportent nativement que GET et POST. Pour PUT, PATCH ou DELETE, utilisez JavaScript.
La Différence Fondamentale : Navigation vs Soumission en HTML
Les liens (<a>) sont des éléments de navigation. Ils indiquent au navigateur : « Va chercher cette ressource ». Cliquer sur un lien déclenche généralement une requête de navigation GET vers l’URL contenue dans l’attribut href. C’est tout. Aucune saisie utilisateur n’est collectée, aucune donnée n’est sérialisée — juste un événement de navigation simple.
Les formulaires (<form>) sont des éléments de soumission de données. Ils collectent des informations auprès de l’utilisateur et les envoient à un serveur. Un formulaire peut utiliser GET ou POST, selon la nature de la requête.
Voici un tableau comparatif rapide :
| Caractéristique | Lien <a> | <form> |
|---|---|---|
| Objectif | Navigation | Soumission de données |
| Méthode HTTP | GET uniquement | GET ou POST |
| Collecte de saisie utilisateur | Non | Oui |
| Clic droit / ouvrir dans un nouvel onglet | Oui | Non |
| Explorable par les moteurs de recherche | Oui | Limité |
| Modifie l’état du serveur | Non | Oui (avec POST) |
GET vs POST dans les Formulaires HTML : Quand Utiliser Chacun
Utilisez un lien pour une navigation sûre et idempotente
Si l’action ne modifie rien sur le serveur et que la destination peut être mise en favoris ou partagée, utilisez un lien :
<a href="/articles/html-basics">Read the HTML guide</a>Les liens sont sûrs, idempotents et mis en cache — exactement ce que les requêtes GET devraient être.
Utilisez un formulaire GET lorsque la saisie utilisateur façonne l’URL
Une barre de recherche est l’exemple classique. L’utilisateur saisit une requête, et le formulaire l’ajoute à l’URL sous forme de chaîne de requête :
<form method="get" action="/search">
<input type="search" name="q" placeholder="Search...">
<button type="submit">Search</button>
</form>Cela produit /search?q=your+query — une URL partageable et pouvant être mise en favoris. Utilisez des formulaires GET lorsque la requête reste sûre et idempotente, mais que les paramètres d’URL dépendent de la saisie utilisateur.
Utilisez un formulaire POST lorsque l’action a des effets de bord
Créer un compte, soumettre un paiement ou poster un commentaire modifient tous l’état du serveur. Ces actions appartiennent aux formulaires POST :
<form method="post" action="/register">
<input type="email" name="email">
<input type="password" name="password">
<button type="submit">Create account</button>
</form>POST envoie les données dans le corps de la requête, pas dans l’URL — ce qui est approprié pour les données sensibles et les actions non idempotentes.
Discover how at OpenReplay.com.
Une Erreur Courante : method="link" N’Existe Pas
Certains développeurs écrivent <form method="link"> en espérant créer un « bouton-lien ». C’est du HTML invalide. Les navigateurs ignorent cette valeur inconnue et basculent vers la valeur par défaut — qui est GET. Le formulaire se soumet quand même, mais de manière silencieuse et incorrecte.
Si vous voulez un bouton qui navigue quelque part, utilisez un lien stylisé comme un bouton — pas un formulaire :
<!-- ❌ Invalide -->
<form method="link" action="/about">
<input type="submit" value="Go to About">
</form>
<!-- ✅ Correct -->
<a href="/about" class="btn">Go to About</a>Capacités Modernes des Formulaires à Connaître
HTML5 a ajouté des surcharges par bouton via les attributs formaction et formmethod, permettant à des boutons de soumission individuels de modifier où ou comment un formulaire se soumet :
<form method="post" action="/save">
<button type="submit">Save</button>
<button type="submit" formaction="/save-and-publish" formmethod="post">Publish</button>
</form>Également à noter : requestSubmit() (contrairement à submit()) déclenche la validation du formulaire avant la soumission, ce qui en fait le meilleur choix pour la soumission programmatique de formulaire en JavaScript.
Pour PUT, PATCH ou DELETE, les formulaires HTML ne supportent pas ces méthodes nativement. Vous aurez besoin de JavaScript (fetch, XMLHttpRequest) ou d’une convention de surcharge de méthode côté serveur.
Conclusion
La décision entre liens et formulaires est simple une fois que vous comprenez la sémantique :
- Naviguer vers une page ? Utilisez un lien.
- Collecter une saisie utilisateur pour une requête ? Utilisez un formulaire GET.
- Soumettre des données qui modifient l’état du serveur ? Utilisez un formulaire POST.
- Effectuer PUT/PATCH/DELETE ? Utilisez JavaScript.
Choisissez l’élément qui correspond à l’intention de l’action. Le HTML sémantique n’est pas qu’une question de justesse — c’est ce qui rend votre interface utilisateur prévisible, accessible et maintenable.
FAQ
Techniquement oui, mais c'est généralement le mauvais choix sémantique. Un formulaire GET est conçu pour collecter une saisie utilisateur et l'ajouter à l'URL sous forme de paramètres de requête. Pour une navigation simple sans saisie utilisateur, un lien est le choix sémantique correct. Les liens sont explorables par les moteurs de recherche, supportent les menus contextuels du clic droit, et communiquent clairement l'intention de navigation aux navigateurs et aux technologies d'assistance.
Les navigateurs traitent toute valeur de méthode non reconnue comme invalide et basculent silencieusement vers GET, qui est la méthode de formulaire par défaut. Donc un formulaire avec method link se soumet quand même, mais il se comporte exactement comme un formulaire GET. Cela peut masquer des bugs et produire un comportement déroutant. Utilisez toujours get ou post comme valeur de méthode de formulaire.
La méthode submit() envoie le formulaire immédiatement sans exécuter la validation HTML intégrée ni déclencher l'événement submit. La méthode requestSubmit() se comporte comme un utilisateur cliquant sur le bouton de soumission. Elle déclenche d'abord la validation des contraintes et déclenche l'événement submit, permettant aux écouteurs d'événements d'intercepter ou d'annuler la soumission. Utilisez requestSubmit() lorsque vous avez besoin que la validation s'exécute.
Les formulaires HTML ne supportent que GET et POST comme valeurs de méthode. Pour envoyer des requêtes DELETE, PUT ou PATCH, vous avez besoin de JavaScript en utilisant fetch ou XMLHttpRequest. Certains frameworks côté serveur supportent également un pattern de surcharge de méthode où vous soumettez un formulaire POST avec un champ de saisie caché qui spécifie la méthode HTTP voulue, que le serveur interprète ensuite en conséquence.
Gain control over your UX
See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
