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 utile pour les formulaires qui mettent à jour les paramètres de recherche dans l'URL, car il réduit le code standard nécessaire pour atteindre les fonctionnalités ci-dessus.

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 fait que la prop action reçoive une string ou une function.

• Lorsque action est une chaîne de caractères, le <Form> se comporte comme un formulaire HTML natif utilisant une méthode GET. Les données du formulaire sont encodées dans l'URL en tant que paramètres de recherche, et lorsque le formulaire est soumis, 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 lorsque le formulaire est soumis. Cela préserve l'interface partagée et l'état côté client.

Props action (string)

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 lorsque le formulaire est soumis.
  • 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 pendant la navigation. Par défaut true, ce qui signifie qu'il défilera 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, l'appel à 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.