使用外部 form tag 來送出表單

March 5, 2018

我們在撰寫網頁表單(form)時,通常會將 submit 動作一起放在 form 裡面:

<form method="POST" action="URL">
  <input type="text" /> Name
  <input type="password" /> Password
  <button type="submit">Submit</button>
</form>

但在某些情況下,你可能會因為 layout 關係把這個 submit 動作放在 form 之外,例如:

<div class="container">
  <div class="myForm">
    <form method="POST" action="URL">
      <input type="text" /> Name
      <input type="password" /> Password
      <!-- ... -->
    </form>
  </div>
  <div class="submitBtn">
    <button type="submit">Submit</button>
  </div>
</div>

這時候並沒有辦法直接透過按鈕直接送出整個表單,當你按下按鈕時,你會發現沒有任何的動作。

要讓表單可以順利地送出,我們只要透過設定 form 的 attritube 就可以順利讓表單送出了。

首先我們為表單加上一個 id

<form id="myForm" method="POST" action="URL">

接著在按鈕的地方加上一個 form 的 attritube:

<button type="submit" form="myForm">Submit</button>

這裡的 form attritube 對應到上面的 form id 的名稱,這樣就完成了。