Form

<Form> 组件扩展了 HTML <form> 元素，提供 客户端导航 和 渐进增强 功能。

对于需要更新 URL 搜索参数的表单，它特别有用，因为它减少了实现上述功能所需的样板代码。

基本用法：

TypeScript
JavaScript

/ui/search.js
import Form from 'next/form'

export default function Page() {
  return (
    <Form action="/search">
      {/* 提交时，输入值会附加到 URL，例如 /search?query=abc */}
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  )
}

/ui/search.js
import Form from 'next/form'

export default function Search() {
  return (
    <Form action="/search">
      {/* 提交时，输入值会附加到 URL，例如 /search?query=abc */}
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  )
}

参考

<Form> 组件的行为取决于 action prop 是传递 string 还是 function。

当 action 是字符串时，<Form> 的行为类似于使用 GET 方法的原生 HTML 表单。表单数据会编码为 URL 的搜索参数，提交表单时会导航到指定 URL。此外，Next.js 还会：
- 提交表单时执行客户端导航而不是完整页面重载。这会保留共享 UI 和客户端状态。

`action`（字符串）Props

当 action 是字符串时，<Form> 组件支持以下 props：

Prop	示例	类型	必填
`action`	`action="/search"`	`string` (URL 或相对路径)	是
`replace`	`replace={false}`	`boolean`	-
`scroll`	`scroll={true}`	`boolean`	-

action：提交表单时要导航到的 URL 或路径。
- 空字符串 "" 会导航到同一路由，但更新搜索参数。
replace：替换当前历史状态，而不是向浏览器历史栈推送新状态。默认为 false。
scroll：控制导航期间的滚动行为。默认为 true，这意味着会滚动到新路由的顶部，并在前进和后退导航时保持滚动位置。

注意事项

onSubmit：可用于处理表单提交逻辑。但是，调用 event.preventDefault() 会覆盖 <Form> 的行为，如导航到指定 URL。
method、encType、target：不支持，因为它们会覆盖 <Form> 的行为。
- 类似地，formMethod、formEncType 和 formTarget 可用于分别覆盖 method、encType 和 target props，使用它们会回退到原生浏览器行为。
- 如果需要使用这些 props，请使用 HTML <form> 元素。
<input type="file">：当 action 是字符串时使用此输入类型，会匹配浏览器行为，提交文件名而不是文件对象。

参考​

action（字符串）Props​

注意事项​

参考

`action`（字符串）Props

注意事项