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.

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

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

   PreactReactSolidSvelteVue

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

2. Créez le point de terminaison de l’API POST 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.

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

3. Créez une fonction qui accepte un événement submit, puis passez-la comme gestionnaire d’événement submit à votre formulaire. Dans la fonction, appelez preventDefault sur l’événement pour passer outre le processus de soumission par défaut du navigateur.

   Ensuite, créez un objet FormData et envoyez-le à votre point de terminaison en utilisant fetch.

   PreactReactSolidSvelteVue

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

Plus de méthodes