<Form>

Die <Form>-Komponente erweitert das HTML-<form>-Element, um Client-seitige Navigation bei der Übermittlung und progressiven Enhancement bereitzustellen.

Sie ist nützlich für Formulare, die URL-Suchparameter aktualisieren, da sie den Boilerplate-Code reduziert, der benötigt wird, um die oben genannten Funktionen zu erreichen.

Grundlegende Verwendung:

import Form from 'next/form'
 
export default function Page() {
  return (
    <Form action="/search">
      {/* Bei der Übermittlung wird der Eingabewert an die URL angehängt, 
          z.B. /search?query=abc */}
      <input name="query" />
      <button type="submit">Absenden</button>
    </Form>
  )
}

Referenz

Das Verhalten der <Form>-Komponente hängt davon ab, ob der action-Prop eine string oder function übergeben wird.

• Wenn action eine Zeichenkette ist, verhält sich die <Form> wie ein natives HTML-Formular, das eine GET-Methode verwendet. Die Formulardaten werden als Suchparameter in die URL codiert, und bei der Übermittlung wird zur angegebenen URL navigiert. Zusätzlich führt Next.js Folgendes aus:
  • Führt eine Client-seitige Navigation anstelle eines vollständigen Seitenneulades durch, wenn das Formular übermittelt wird. Dabei bleibt die gemeinsame Benutzeroberfläche und der Client-seitige Zustand erhalten.

action (Zeichenkette) Props

Wenn action eine Zeichenkette ist, unterstützt die <Form>-Komponente die folgenden Props:

• action: Die URL oder der Pfad, zu dem bei der Formularübermittlung navigiert wird.
  • Eine leere Zeichenkette "" navigiert zur gleichen Route mit aktualisierten Suchparametern.
• replace: Ersetzt den aktuellen Historienzustand, anstatt einen neuen zum Browser-Verlaufsstapel hinzuzufügen. Standard ist false.
• scroll: Steuert das Scroll-Verhalten während der Navigation. Standard ist true, was bedeutet, dass zur Spitze der neuen Route gescrollt wird und die Scroll-Position für Rückwärts- und Vorwärtsnavigation beibehalten wird.

Einschränkungen

• onSubmit: Kann verwendet werden, um die Logik zur Formulareinreichung zu handhaben. Wenn jedoch event.preventDefault() aufgerufen wird, überschreibt dies das Verhalten von <Form>, wie z.B. das Navigieren zur angegebenen URL.
• method, encType, target: Werden nicht unterstützt, da sie das Verhalten von <Form> überschreiben.
  • Entsprechend können formMethod, formEncType und formTarget verwendet werden, um die Eigenschaften method, encType und target zu überschreiben. Die Verwendung dieser Eigenschaften greift auf das native Browserverhalten zurück.
  • Wenn Sie diese Eigenschaften verwenden müssen, nutzen Sie stattdessen das HTML-Element <form>.
• <input type="file">: Bei Verwendung dieses Eingabetyps, wenn action eine Zeichenfolge ist, entspricht das Verhalten dem des Browsers, indem der Dateiname anstelle des Dateiobjekts übermittelt wird.