# Comment fonctionne l'envoi d'un formulaire HTML > Ce que fait un navigateur quand un formulaire est envoyé : quels champs il transmet, comment il les encode, ce que le serveur doit répondre, et comment Ikiform répond. Publié le 2026-10-25 · https://ikiform.com/fr/guides/html-form-submission Quand quelqu'un appuie sur le bouton d'envoi, le navigateur vérifie les contraintes du formulaire, rassemble chaque contrôle nommé et activé, les encode selon l'`enctype` du formulaire et les envoie à l'URL `action` avec la `method` du formulaire. Le serveur répond comme pour n'importe quel chargement de page, et un serveur bien conçu répond à un POST réussi par une redirection `303`, pour qu'un rafraîchissement n'envoie pas le formulaire deux fois. Faites pointer `action` vers un backend de formulaires comme Ikiform et vous obtenez cette redirection, la validation des champs et le filtrage du spam sans serveur à vous. Les formulaires HTML sont plus anciens que JavaScript et restent le moyen le plus fiable d'envoyer des données depuis une page web. Ils fonctionnent avec les scripts désactivés, sur des téléphones lents et dans tous les créateurs de sites qui vous laissent coller du balisage. La plupart des bugs de formulaire viennent d'une méconnaissance de ce que fait le navigateur de lui-même, donc ce guide décrit un envoi étape par étape, puis montre où s'insère un backend de formulaires. ## Ce qui se passe quand vous appuyez sur envoyer Un envoi est une navigation normale accompagnée d'un corps. Le navigateur fait quatre choses avant que quoi que ce soit ne quitte la page, puis confie la requête au réseau et charge ce qui revient. Schéma : Ce que fait un navigateur entre le clic sur envoyer et la page suivante 1. Un bouton d'envoi, la touche Entrée dans un champ texte ou form.requestSubmit() démarre l'envoi et déclenche un événement submit. 2. Sauf si le formulaire a novalidate, le navigateur vérifie les contraintes de chaque contrôle. Le premier contrôle invalide reçoit un message et rien n'est envoyé. 3. Le navigateur construit le jeu de données du formulaire à partir de chaque contrôle qui a un nom et n'est pas désactivé. 4. Il encode ce jeu selon l'enctype du formulaire, en urlencoded sauf indication contraire. 5. Il navigue vers l'URL action avec la méthode du formulaire, en envoyant le corps. 6. Le serveur répond. Un 303 indique au navigateur de charger une autre URL en GET, qui est la page sur laquelle le visiteur arrive. Tout ce qui est au-dessus de la ligne se passe sans aucun réseau. Un écouteur de l'événement submit peut arrêter le processus à la première étape et prendre le relais avec fetch. ## Les attributs qui déterminent la requête Cinq attributs de `
` déterminent où vont les données et comment. Chacun peut être remplacé pour un seul bouton avec l'attribut `form*` correspondant : c'est ainsi qu'un formulaire peut avoir des boutons **Send** et **Save draft** au comportement différent. | Attribut | Par défaut | Ce qu'il fait | Remplacement par bouton | | --- | --- | --- | --- | | `action` | L'URL de la page elle-même | L'URL qui reçoit les données. Les valeurs relatives sont résolues par rapport à la page. Voir [l'attribut action](https://ikiform.com/fr/guides/html-form-submission/action-attribute.md) | `formaction` | | `method` | `get` | `get` place les champs dans les paramètres d'URL. `post` les envoie comme corps. `dialog` ferme un `` sans rien envoyer | `formmethod` | | `enctype` | `application/x-www-form-urlencoded` | La façon dont un corps `post` est encodé. `multipart/form-data` est nécessaire pour les fichiers. `text/plain` est destiné au débogage | `formenctype` | | `novalidate` | Désactivée | Ignore la vérification des contraintes du navigateur à l'envoi | `formnovalidate` | | `target` | `_self` | L'endroit où la réponse se charge. `_blank` ouvre un nouvel onglet, une iframe nommée garde la page en place | `formtarget` | Deux boutons, deux comportements. Le second ignore la validation, et le `name` et la `value` du bouton cliqué sont ajoutés aux données, pour que le serveur sache lequel a été pressé : `Deux boutons d'envoi`: ```html ``` ### Quels contrôles sont envoyés Les navigateurs n'envoient que ce que la spécification HTML appelle le jeu de données du formulaire. La plupart des surprises dans un journal de soumissions viennent de ces règles : - Un contrôle a besoin d'un `name`. Un `id` seul n'envoie rien. - Les contrôles `disabled` sont ignorés. Utilisez `readonly` si vous voulez une valeur affichée, verrouillée et envoyée. - Une case à cocher ou un bouton radio non coché n'envoie rien du tout, pas `false`. Une case cochée sans `value` envoie `on`. - Seul le bouton qui a envoyé le formulaire est inclus, avec son `name` et sa `value`. - ` ``` **Next.js** Une server action reçoit le `FormData`, le transmet en JSON avec votre clé secrète et renvoie les erreurs de champ d'Ikiform. `useActionState` place chaque message sous son input et conserve ce que le visiteur a saisi. `app/report/actions.ts`: ```ts "use server"; import { headers } from "next/headers"; export interface ReportState { sent: boolean; fields: Record; message: string; values: Record; } const NAMES = ["email", "page", "severity", "details"] as const; export async function sendReport(_previous: ReportState, formData: FormData): Promise { const values = Object.fromEntries(NAMES.map((name) => [name, String(formData.get(name) ?? "").trim()])); const origin = (await headers()).get("origin"); const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", { method: "POST", headers: { Accept: "application/json", "Content-Type": "application/json", Authorization: `Bearer ${process.env.IKIFORM_SECRET_KEY}`, ...(origin ? { Origin: origin } : {}), }, body: JSON.stringify({ ...values, _gotcha: String(formData.get("_gotcha") ?? "") }), }); const result = await response.json().catch(() => null); if (result?.ok) return { sent: true, fields: {}, message: "Thanks. We'll look at that page today.", values: {} }; return { sent: false, fields: result?.error?.fields ?? {}, message: result?.error?.message ?? "The report didn't go through. Try again.", values, }; } ``` `app/report/report-form.tsx`: ```tsx "use client"; import { useActionState } from "react"; import { type ReportState, sendReport } from "./actions"; const initial: ReportState = { sent: false, fields: {}, message: "", values: {} }; function FieldError({ id, messages }: { id: string; messages?: string[] }) { return messages?.length ?

{messages[0]}

: null; } export function ReportForm() { const [state, action, pending] = useActionState(sendReport, initial); if (state.sent) return

{state.message}

; return (
{fields.details &&

{fields.details[0]}

} )} ``` **TanStack Start** Une server function POST lit le `FormData` dans `.validator()` et renvoie les erreurs de champ comme données simples, pour que le composant puisse les afficher sans rien intercepter. `src/routes/report.tsx`: ```tsx import { createFileRoute } from "@tanstack/react-router"; import { createServerFn, useServerFn } from "@tanstack/react-start"; import { getRequestHeader } from "@tanstack/react-start/server"; import { type FormEvent, useState } from "react"; type Outcome = { sent: boolean; fields: Record; message: string }; const sendReport = createServerFn({ method: "POST" }) .validator((data: unknown) => { if (!(data instanceof FormData)) throw new Error("Expected form data"); const read = (name: string) => String(data.get(name) ?? "").trim(); return { email: read("email"), page: read("page"), severity: read("severity"), details: read("details"), _gotcha: read("_gotcha"), }; }) .handler(async ({ data }): Promise => { const origin = getRequestHeader("origin"); const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", { method: "POST", headers: { Accept: "application/json", "Content-Type": "application/json", Authorization: `Bearer ${process.env.IKIFORM_SECRET_KEY}`, ...(origin ? { Origin: origin } : {}), }, body: JSON.stringify(data), }); const result = await response.json(); if (result.ok) return { sent: true, fields: {}, message: "Thanks. We'll look at that page today." }; return { sent: false, fields: result.error.fields ?? {}, message: String(result.error.message) }; }); export const Route = createFileRoute("/report")({ component: Report }); function Report() { const send = useServerFn(sendReport); const [outcome, setOutcome] = useState(null); const [pending, setPending] = useState(false); async function onSubmit(event: FormEvent) { event.preventDefault(); setPending(true); try { setOutcome(await send({ data: new FormData(event.currentTarget) })); } catch { setOutcome({ sent: false, fields: {}, message: "The report didn't go through. Try again." }); } finally { setPending(false); } } if (outcome?.sent) return

{outcome.message}

; const fields = outcome?.fields ?? {}; return (
{fields.email ?

{fields.email[0]}

: null} {fields.page ?

{fields.page[0]}

: null} {#if fields.details}

{fields.details[0]}

{/if}
{/if} ``` **Nuxt** Une route serveur transmet le signalement avec `runtimeConfig.ikiformSecretKey`, défini depuis `NUXT_IKIFORM_SECRET_KEY`. Elle lève `createError` avec les erreurs de champ dans `data`, que `$fetch` restitue côté client. `server/api/report.post.ts`: ```ts export default defineEventHandler(async (event) => { const body = await readBody>(event); const { ikiformSecretKey } = useRuntimeConfig(event); const origin = getRequestHeader(event, "origin"); const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", { method: "POST", headers: { Accept: "application/json", "Content-Type": "application/json", Authorization: `Bearer ${ikiformSecretKey}`, ...(origin ? { Origin: origin } : {}), }, body: JSON.stringify({ email: body.email ?? "", page: body.page ?? "", severity: body.severity ?? "", details: body.details ?? "", _gotcha: body._gotcha ?? "", }), }); const result = await response.json(); if (!result.ok) { throw createError({ status: response.status, message: String(result.error.message), data: { fields: result.error.fields ?? {} }, }); } return { sent: true }; }); ``` `app/components/ReportForm.vue`: ```vue