フォームの遷移先を、ボタンごとに変更する（formaction属性を利用）

こんにちは、@yoheiMuneです。
<form>の遷移先はaction要素で指定しますが、実はボタンでも指定できます。今日はその方法をブログに書きたいと思います。

目次

まとめ

<button>や<input type="submit">にformaction属性を指定することで、ボタンごとに別々の遷移先を指定できます。

<form action="/save">

    <!-- formタグのaction（/save）を呼び出します. -->
    <button>保存する</button>

    <!-- formactionで指定した遷移先（/temporary-save）を呼び出します. -->
    <button formaction="/temporary-save">一時保存する</button>

    <!-- formactionで指定した遷移先（/update）を呼び出します. -->
    <input type="submit" formaction="/update" value="更新する">

</form>

何に便利なのか

何らかのフォーム（登録フォームやお問い合わせフォームなど）で、同じフォームを使いつつ処理を分けたいときに便利です。例えば最近の仕事では、発注書や見積書を作る際に、同じフォームを使い「新規作成」と「下書き保存」で処理を切り替えました。JavaScriptを使わずに、サブミット先を切り替えられる点が便利です。

動作の仕組み

<button>や<input>にformaction属性に遷移先を指定することで、ボタン押下時の遷移先を個別に指定できます。formactionの値は、<form>のaction属性の値よりも優先されます。

<!-- buttonタグに指定した例。formactionで指定した遷移先（/temporary-save）を呼び出します. -->
<button formaction="/temporary-save">一時保存する</button>

<!-- inputタグに指定した例。formactionで指定した遷移先（/update）を呼び出します. -->
<input type="submit" formaction="/update" value="更新する">    

ブラウザサポート状況

formactionはHTML5から追加された属性で、IE11、Edge、Chrome、Safari、Firefoxと主要ブラウザでは全て動作します。便利ですね。

formationのブラウザサポート状況 | Can I use

最後に

僕は最近までこの実装を知らず、とある仕事でコードレビューをしている時に初めて見つけました。コードレビューはいくつかの案件で行っていますが、人それぞれコーディングが違うので、見ていて楽しいですし、学ぶことがたくさんあり、その点でも楽しいなと感じています。

最後になりますが本ブログでは、フロントエンド、サーバー、PHP、Python、インフラ、Swift、Node.js、Java、Linux、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！