Formular

Die <Form>-Komponente erweitert das HTML-<form>-Element um Client-seitige Navigation bei Übermittlung und progressive Verbesserung.

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

Grundlegende Verwendung:

import Form from 'next/form'

export default function Page() {
  return (
    <Form action="/search">
      {/* Bei Übermittlung wird der Eingabewert an
          die URL angehängt, z.B. /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">
      {/* Bei Übermittlung wird der Eingabewert an
          die URL angehängt, z.B. /search?query=abc */}
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  )
}

Referenz

Das Verhalten der <Form>-Komponente hängt davon ab, ob der action-Prop einen string oder eine function erhält.

• Wenn action ein String ist, verhält sich <Form> wie ein natives HTML-Formular mit GET-Methode. Die Formulardaten werden als Suchparameter in die URL kodiert, und bei Übermittlung wird zur angegebenen URL navigiert. Zusätzlich führt Next.js folgendes durch:
  • Führt eine Client-seitige Navigation anstelle eines vollständigen Seiten-Neuladens durch, was gemeinsame UI und Client-seitigen Zustand erhält.

action (string) Props

Wenn action ein String ist, unterstützt die <Form>-Komponente folgende Props:

• action: Die URL oder der Pfad, zu dem bei Formularübermittlung navigiert werden soll.
  • Ein leerer String "" navigiert zur gleichen Route mit aktualisierten Suchparametern.
• replace: Ersetzt den aktuellen Verlaufseintrag anstatt einen neuen zum Browserverlauf hinzuzufügen. Standard ist false.
• scroll: Steuert das Scrollverhalten während der Navigation. Standard ist true, was bedeutet, dass zum Anfang der neuen Route gescrollt wird und die Scrollposition für Vor- und Zurück-Navigation beibehalten wird.

Einschränkungen

• onSubmit: Kann zur Behandlung von Formularübermittlungslogik verwendet werden. Der Aufruf von event.preventDefault() überschreibt jedoch das <Form>-Verhalten wie die Navigation zur angegebenen URL.
• method, encType, target: Werden nicht unterstützt, da sie das <Form>-Verhalten überschreiben.
  • Ähnlich können formMethod, formEncType und formTarget verwendet werden, um die method-, encType- und target-Props zu überschreiben, wodurch das native Browserverhalten wiederhergestellt wird.
  • Wenn Sie diese Props benötigen, verwenden Sie stattdessen das HTML-<form>-Element.
• <input type="file">: Die Verwendung dieses Eingabetyps bei einer String-action entspricht dem Browserverhalten, indem der Dateiname anstelle des Dateiobjekts übermittelt wird.