`<Form>`

<Form> は、プログレッシブエンハンスメントされた HTML <form> であり、fetch を介してアクションにデータを送信し、useNavigation の保留状態をアクティブにします。これにより、基本的な HTML フォームを超えた高度なユーザーインターフェースが可能になります。フォームのアクションが完了すると、ページ上のすべてのデータがサーバーから自動的に再検証され、UI がデータと同期した状態に保たれます。

HTML フォーム API を使用しているため、サーバーでレンダリングされたページは JavaScript がロードされる前に基本的なレベルでインタラクティブになります。Remix が送信を管理する代わりに、ブラウザが送信と保留状態（回転するファビコンなど）を管理します。JavaScript がロードされると、Remix が引き継ぎ、Web アプリケーションのユーザーエクスペリエンスを有効にします。

Form は、URL を変更したり、ブラウザの履歴スタックにエントリを追加したりする必要がある送信に最も役立ちます。ブラウザの履歴スタックを操作する必要がないフォームの場合は、<fetcher.Form> を使用してください。

import { Form } from "@remix-run/react";
 
function NewEvent() {
  return (
    <Form action="/events" method="post">
      <input name="title" type="text" />
      <input name="description" type="text" />
    </Form>
  );
}

Props

`action`

フォームデータを送信する URL。

undefined の場合、これはコンテキスト内の最も近いルートにデフォルト設定されます。親ルートが <Form> をレンダリングしているが、URL がより深い子ルートと一致する場合、フォームは親ルートにポストされます。同様に、子ルート内のフォームは子ルートにポストされます。これは、常に完全な URL を指すネイティブの <form> とは異なります。

相対 <Form action> の動作に関する future.v3_relativeSplatPath future フラグについては、useResolvedPath ドキュメントの Splat Paths セクションを参照してください。

`method`

使用する HTTP 動詞を決定します。DELETE、GET、PATCH、POST、および PUT です。デフォルトは GET です。

<Form method="post" />

ネイティブの <form> は GET と POST のみをサポートしているため、プログレッシブエンハンスメントをサポートする場合は、他の動詞を避ける必要があります。

`encType`

フォーム送信に使用するエンコードタイプ。

<Form encType="multipart/form-data" />

デフォルトは application/x-www-form-urlencoded で、ファイルのアップロードには multipart/form-data を使用します。

`navigate`

<Form navigate={false}> を指定することで、フォームにナビゲーションをスキップして内部的に fetcher を使用するように指示できます。これは基本的に useFetcher() + <fetcher.Form> の省略形であり、結果のデータに関心がなく、送信を開始して useFetchers() を介して保留状態にアクセスしたいだけの場合に使用します。

<Form method="post" navigate={false} />

`fetcherKey`

ナビゲートしない Form を使用する場合、オプションで独自の fetcher key を指定することもできます。

<Form method="post" navigate={false} fetcherKey="my-key" />

`preventScrollReset`

<ScrollRestoration> を使用している場合、これにより、フォームが送信されたときにスクロール位置がウィンドウの上部にリセットされるのを防ぐことができます。

<Form preventScrollReset />

`replace`

新しいエントリをプッシュする代わりに、履歴スタック内の現在のエントリを置き換えます。

<Form replace />

`reloadDocument`

true の場合、クライアント側のルーティングではなく、ブラウザでフォームを送信します。ネイティブの <form> と同じです。

<Form reloadDocument />

これは、<form> よりも推奨されます。action プロップが省略されている場合、<Form> と <form> は、現在の URL が何であるかによって異なるアクションを呼び出すことがあります。これは、<form> が現在の URL をデフォルトとして使用するのに対し、<Form> はフォームがレンダリングされるルートの URL を使用するためです。

`viewTransition`

viewTransition プロップは、最終的な状態更新を document.startViewTransition() でラップすることにより、このナビゲーションの View Transition を有効にします。このビュー遷移に特定のスタイルを適用する必要がある場合は、useViewTransitionState() も活用する必要があります。

注記

`?index`

インデックスルートとその親ルートは同じ URL を共有するため、?index パラメータを使用して区別します。

<Form action="/accounts?index" method="post" />

action url	route action
`/accounts?index`	`app/routes/accounts._index.tsx`
`/accounts`	`app/routes/accounts.tsx`

参照：

?index クエリパラメータ

追加リソース

動画:

関連するディスカッション:

関連する API: