Formulaire

Le composant <Form> étend l'élément HTML <form> pour fournir une navigation côté client lors de la soumission, et une amélioration progressive.

Il est particulièrement utile pour les formulaires qui mettent à jour les paramètres de recherche dans l'URL, car il réduit le code passe-partout nécessaire pour réaliser ce qui précède.

Utilisation de base :

import Form from 'next/form'

export default function Page() {
  return (
    <Form action="/search">
      {/* Lors de la soumission, la valeur de l'input sera ajoutée
          à l'URL, par exemple /search?query=abc */}
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  )
}

import Form from 'next/form'

export default function Search() {
  return (
    <Form action="/search">
      {/* Lors de la soumission, la valeur de l'input sera ajoutée
          à l'URL, par exemple /search?query=abc */}
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  )
}

Référence

Le comportement du composant <Form> dépend du type de la prop action (chaîne de caractères ou fonction).

• Lorsque action est une chaîne de caractères, le <Form> se comporte comme un formulaire HTML natif utilisant la méthode GET. Les données du formulaire sont encodées dans l'URL sous forme de paramètres de recherche, et lors de la soumission, il navigue vers l'URL spécifiée. De plus, Next.js :
  • Effectue une navigation côté client au lieu d'un rechargement complet de la page lors de la soumission du formulaire. Cela préserve l'interface partagée et l'état côté client.

Props action (chaîne de caractères)

Lorsque action est une chaîne de caractères, le composant <Form> prend en charge les props suivantes :

• action : L'URL ou le chemin vers lequel naviguer lors de la soumission du formulaire.
  • Une chaîne vide "" naviguera vers la même route avec les paramètres de recherche mis à jour.
• replace : Remplace l'état actuel de l'historique au lieu d'en ajouter un nouveau à la pile d'historique du navigateur. Par défaut false.
• scroll : Contrôle le comportement de défilement lors de la navigation. Par défaut true, ce qui signifie qu'il fera défiler vers le haut de la nouvelle route et maintiendra la position de défilement pour les navigations avant et arrière.

Mises en garde

• onSubmit : Peut être utilisé pour gérer la logique de soumission du formulaire. Cependant, appeler event.preventDefault() remplacera le comportement de <Form>, comme la navigation vers l'URL spécifiée.
• method, encType, target : Ne sont pas pris en charge car ils remplacent le comportement de <Form>.
  • De même, formMethod, formEncType et formTarget peuvent être utilisés pour remplacer respectivement les props method, encType et target, et leur utilisation reviendra au comportement natif du navigateur.
  • Si vous avez besoin d'utiliser ces props, utilisez plutôt l'élément HTML <form>.
• <input type="file"> : L'utilisation de ce type d'input lorsque action est une chaîne de caractères correspondra au comportement du navigateur en soumettant le nom du fichier au lieu de l'objet fichier.