SPAばっかり書いていると、すこーし昔な感じの form を使った処理を忘れがちにしてしまいます。
私の備忘録として残すとともに、いろいろな form の書き方を見比べてみましょう。

1. 一般的な form 処理

<form id="formId" name="formName" method="post" action="foo/index.php" >
  <label for="sei">姓：</label>
  <input id="sei" type="text" name="sei">
  <label for="mei">名：</label>
  <input id="mei" type="text" name="mei">
  <button>登録する</button>
</form>

よく見るやつです。
とくに難しいことはしていません。

2. form 要素の外にボタンを置いて、form を実行

<form id="formId" name="formName" method="post" action="foo/index.php" >
  <label for="sei">姓：</label>
  <input id="sei" type="text" name="sei">
  <label for="mei">名：</label>
  <input id="mei" type="text" name="mei">
</form>

<p>ボタンを押して登録しよう！</p>
<button type="submit" form="formId">登録する</button>

form の外に追いやってボタンを設定するケースです。こちらは、 button 要素に form 属性を指定することで、 form 内に button を配置したときと同じことができます。

3. from の外にパラメータを配置して、form を実行する

<form id="formId" name="formName" method="post" action="foo/index.php"></form>

<label for="sei">姓：</label>
<input id="sei" type="text" name="sei" form="formId" />
<label for="mei">名：</label>
<input id="mei" type="text" name="mei" form="formId" />

<p>ボタンを押して登録しよう！</p>
<button type="submit" form="formId">登録する</button>

これはあまり見かけないかもしれませんが、知っておくと役に立つかもしれません。
注目してもらいたいのは、 input 要素のに form 属性を設定していることです。
こうすることで、 form の外にはみ出した要素があったとしても、それを form のパラメータとして含めることができます。
ただし、IEでは使えないという話も聞くので、実装については検討してから導入しましょう。

4. javascript で form を実行

<script>
var submit = function() {
  var form = document.getElementById('formId');
  form.action = "foo/index.php"
  form.method = "post";
  form.submit();
}
</script>

<form id="formId" name="formName">
  <label for="sei">姓：</label>
  <input id="sei" type="text" name="sei" />
  <label for="mei">名：</label>
  <input id="mei" type="text" name="mei" />
  <button onclick="submit()">登録する</button>
</form>

たまにこういう実装している箇所があるかもしれません。
button 要素に onclick のイベントハンドラを仕掛けます。クリック時には submit 関数が呼ばれて、 form 処理を実行します。

5. javascript で form を実行 -その2-

<script>
var submit = function() {
  var form = document.formName;
  form.action = "foo/index.php"
  form.method = "post";
  form.submit();
}
</script>

<form id="formId" name="formName">
  <label for="sei">姓：</label>
  <input id="sei" type="text" name="sei" />
  <label for="mei">名：</label>
  <input id="mei" type="text" name="mei" />
  <button onclick="submit()">登録する</button>
</form>

4と同じように見えるのですが、今回は document.getElementById は使わずに、 DOM生成時に document オブジェクトに formName がぶら下がるのを利用して form 処理の実行を行っています。

conclusion

というわけで、一概に form 処理といってもそこそこあります。 HTML の世界で完結させるのか、 JavaScript も交えた世界とするのか、どういう実装が良いかを、システムの要件にしたがって適切に選択していきましょう。