表單 (Form)

<Form> 元件擴展了 HTML <form> 元素的功能，提供 客戶端導航 (client-side navigation) 提交和 漸進增強 (progressive enhancement)。

對於需要更新 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 還會：
  • 提交表單時執行客戶端導航 (client-side navigation)，而非整頁重新載入，保留共享 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 是字串時使用此輸入類型，會匹配瀏覽器行為，提交檔案名稱而非檔案物件。