使用外部 form tag 來送出表單

我們在撰寫網頁表單（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 的名稱，這樣就完成了。