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 も交えた世界とするのか、どういう実装が良いかを、システムの要件にしたがって適切に選択していきましょう。