Aller au contenu

Construire des formulaires avec des routes d'API

Un formulaire HTML amène le navigateur à rafraîchir la page ou à naviguer vers une nouvelle page. Pour envoyer les données du formulaire au point de terminaison de l'API, vous devez intercepter la soumission du formulaire à l'aide de JavaScript.

Cette méthode vous montre comment envoyer les données du formulaire au point de terminaison de l'API et comment traiter ces données.

Prérequis

Recette

  1. Créez un point de terminaison d'API POST dans /api/feedback qui recevra les données du formulaire. Utilisez request.formData() pour les traiter. Assurez-vous de valider les valeurs du formulaire avant de les utiliser.

    Cet exemple envoie un objet JSON avec un message au client.

    export const prerender = false; // Pas nécessaire en mode `server`
import type { APIRoute } from "astro";

export const POST: APIRoute = async ({ request }) => {
  const data = await request.formData();
  const name = data.get("name");
  const email = data.get("email");
  const message = data.get("message");
  // Valider les données - vous voudrez probablement faire plus que cela
  if (!name || !email || !message) {
    return new Response(
      JSON.stringify({
        message: "Champs obligatoires manquants",
      }),
      { status: 400 }
    );
  }
  // Faire quelque chose avec les données, puis renvoyer une réponse positive
  return new Response(
    JSON.stringify({
      message: "Succès !"
    }),
    { status: 200 }
  );
};

  2. Créez un composant de formulaire en utilisant votre framework UI. Chaque entrée doit avoir un attribut name qui décrit la valeur de cette entrée.

    Veillez à inclure un élément <button> ou <input type="submit"> pour soumettre le formulaire.

      export default function Form() {
    return (
      <form>
        <label>
          Nom
          <input type="text" id="name" name="name" required />
        </label>
        <label>
          Email
          <input type="email" id="email" name="email" required />
        </label>
        <label>
          Message
          <textarea id="message" name="message" required />
        </label>
        <button>Envoyer</button>
      </form>
    );
  }

  3. Créez une fonction qui accepte un événement submit, puis passez-la comme gestionnaire submit à votre formulaire.

    Dans la fonction :

    • Appelez preventDefault() sur l'événement pour remplacer le processus de soumission par défaut du navigateur.
    • Créez un objet FormData et envoyez-le dans une requête POST à votre point de terminaison en utilisant fetch().
      import { useState } from "preact/hooks";

  export default function Form() {
    const [responseMessage, setResponseMessage] = useState("");

    async function submit(e: SubmitEvent) {
      e.preventDefault();
      const formData = new FormData(e.target as HTMLFormElement);
      const response = await fetch("/api/feedback", {
        method: "POST",
        body: formData,
      });
      const data = await response.json();
      if (data.message) {
        setResponseMessage(data.message);
      }
    }

    return (
      <form onSubmit={submit}>
        <label>
          Nom
          <input type="text" id="name" name="name" required />
        </label>
        <label>
          Email
          <input type="email" id="email" name="email" required />
        </label>
        <label>
          Message
          <textarea id="message" name="message" required />
        </label>
        <button>Envoyer</button>
        {responseMessage && <p>{responseMessage}</p>}
      </form>

    );
  }

  4. Importez et incluez votre composant <FeedbackForm /> dans une page. Assurez-vous d'utiliser une directive client:* pour garantir que la logique du formulaire est hydratée quand vous le souhaitez.

      ---
  import FeedbackForm from "../components/FeedbackForm"
  ---
  <FeedbackForm client:load />
Contribuer Communauté Parrainer