フォーム

段階的に強化された HTML <form> は、fetch を使用して操作にデータを送信し、useNavigation の保留状態をアクティブにし、基本的な HTML フォームを超えた高度なユーザーインターフェースを有効にします。フォーム操作が完了すると、ページ上のすべてのデータはサーバーから自動的に再検証され、UI とデータが同期されます。

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

フォームは、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>
  );
}

プロパティ

`action`

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

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

useResolvedPath ドキュメントの Splat Paths セクションを参照して、splat ルートにおける future.v3_relativeSplatPath フラグの動作についての説明を確認してください。

`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 navigation={false}> を指定することで、フォームにナビゲーションをスキップさせ、内部で fetcher を使用させることができます。これは実際には useFetcher() + <fetcher.Form> の短縮形であり、結果データを気にせず、送信を開始し、useFetchers() を介して保留状態にアクセスしたい場合に使用します。

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

`fetcherKey`

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

<Form method="post" navigation={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：