表单 (Form)

<Form> 组件扩展了 HTML <form> 元素的功能，提供 客户端导航提交以及渐进增强特性。

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

基础用法：

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>
  )
}

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 属性接收的是 string 还是 function。

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

action (字符串) 属性

当 action 为字符串时，<Form> 组件支持以下属性：

• action：表单提交时要导航到的 URL 或路径
  • 空字符串 "" 会导航到相同路由但更新搜索参数
• replace：替换当前历史记录而非在浏览器历史栈中添加新记录。默认为 false
• scroll：控制导航时的滚动行为。默认为 true，即滚动到新路由顶部，并在前进/后退时保持滚动位置

注意事项

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