Form

<Form> 組件延伸了 HTML <form> 元素，以提供 提交時的用戶端導航，以及漸進式增強。

它適用於更新 URL 搜尋參數的表單，因為它可以減少實現上述目標所需的樣板程式碼。

基本用法

import Form from 'next/form'
 
export default function Page() {
  return (
    <Form action="/search">
      {/* On submission, the input value will be appended to 
          the URL, e.g. /search?query=abc */}
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  )
}

參考

<Form> 組件的行為取決於 action prop 是否傳遞了 string 或 function。

• 當 action 是 string 時，<Form> 的行為就像使用 GET 方法的原生 HTML 表單。表單資料會編碼到 URL 中作為搜尋參數，並且在提交表單時，它會導航到指定的 URL。此外，Next.js
  • 執行用戶端導航，而不是在提交表單時重新載入整個頁面。這保留了共用的 UI 和用戶端狀態。

action (string) Props

當 action 是字串時，<Form> 組件支援以下 props

• 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 是字串時，使用此輸入類型將會比對瀏覽器行為，方法是提交檔案名稱而不是檔案物件。