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

• Un projet avec SSR (output: 'server' ou 'hybrid') activé
• Un projet avec l’intégration Framework UI installé

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.

   Preact

   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>
     );
   }

   React

   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>
     );
   }

   Solid

   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>
     );
   }

   Svelte

   src/components/FeedbackForm.svelte

   <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>

   Vue

   src/components/FeedbackForm.vue

   <template>
     <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>
   </template>

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().
   Preact

   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>
   
     );
   }

   React

   src/components/FeedbackForm.tsx

   import { useState } from "react";
   import type { FormEvent } from "react";
   
   export default function Form() {
     const [responseMessage, setResponseMessage] = useState("");
   
     async function submit(e: FormEvent<HTMLFormElement>) {
       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 htmlFor="name">
           Name
           <input type="text" id="name" name="name" autoComplete="name" required />
         </label>
         <label htmlFor="email">
           Email
           <input type="email" id="email" name="email" autoComplete="email" required />
         </label>
         <label htmlFor="message">
           Message
           <textarea id="message" name="message" autoComplete="off" required />
         </label>
         <button>Send</button>
         {responseMessage && <p>{responseMessage}</p>}
       </form>
     );
   }

   Solid

   src/components/FeedbackForm.tsx

   import { createSignal, createResource, Suspense } from "solid-js";
   
   async function postFormData(formData: FormData) {
     const response = await fetch("/api/feedback", {
       method: "POST",
       body: formData,
     });
     const data = await response.json();
     return data;
   }
   
   export default function Form() {
     const [formData, setFormData] = createSignal<FormData>();
     const [response] = createResource(formData, postFormData);
   
     function submit(e: SubmitEvent) {
       e.preventDefault();
       setFormData(new FormData(e.target as HTMLFormElement));
     }
   
     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>
         <Suspense>{response() && <p>{response().message}</p>}</Suspense>
       </form>
     );
   }

   Svelte

   src/components/FeedbackForm.svelte

   <script lang="ts">
     let responseMessage: string;
   
     async function submit(e: SubmitEvent) {
       e.preventDefault();
       const formData = new FormData(e.currentTarget as HTMLFormElement);
       const response = await fetch("/api/feedback", {
         method: "POST",
         body: formData,
       });
       const data = await response.json();
       responseMessage = data.message;
     }
   </script>
   
   <form on:submit={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>Envoyer</button>
     {#if responseMessage}
       <p>{responseMessage}</p>
     {/if}
   </form>

   Vue

   src/components/FeedbackForm.vue

   <script setup lang="ts">
   import { ref } from "vue";
   
   const responseMessage = ref<string>();
   
   async function submit(e: Event) {
     e.preventDefault();
     const formData = new FormData(e.currentTarget as HTMLFormElement);
     const response = await fetch("/api/feedback", {
       method: "POST",
       body: formData,
     });
     const data = await response.json();
     responseMessage.value = data.message;
   }
   </script>
   
   <template>
     <form @submit="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>
       <p v-if="responseMessage">{{ responseMessage }}</p>
     </form>
   </template>

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.

   Preact

   src/pages/index.astro

   ---
   import FeedbackForm from "../components/FeedbackForm"
   ---
   <FeedbackForm client:load />

   React

   src/pages/index.astro

   ---
   import FeedbackForm from "../components/FeedbackForm"
   ---
   <FeedbackForm client:load />

   Solid

   src/pages/index.astro

   ---
   import FeedbackForm from "../components/FeedbackForm"
   ---
   <FeedbackForm client:load />

   Svelte

   src/pages/index.astro

   ---
   import FeedbackForm from "../components/FeedbackForm.svelte"
   ---
   <FeedbackForm client:load />

   Vue

   src/pages/index.astro

   ---
   import FeedbackForm from "../components/FeedbackForm.vue"
   ---
   <FeedbackForm client:load />