Aller au contenu

Construire des formulaires avec des routes 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

Titre de la section Prérequis

Recette

Titre de la section Recette

  1. Créez un point de terminaison API POST à /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.

    src/pages/api/feedback.ts
    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: "Missing required fields",
          }),
          { status: 400 }
        );
      }
      // Faire quelque chose avec les données, puis renvoyer une réponse positive
      return new Response(
        JSON.stringify({
          message: "Success!"
        }),
        { 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.

    src/components/FeedbackForm.tsx
    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().
    src/components/FeedbackForm.tsx
    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>
            Name
            <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>Send</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.

    src/pages/index.astro
    ---
    import FeedbackForm from "../components/FeedbackForm"
    ---
    <FeedbackForm client:load />