【HTML5】formのactionをsubmitボタン毎に変える方法(JavaScript不要)

　submit前にJavaScriptで書き換える方法がポピュラーなようですが、HTML5ではもっと簡単な方法があります。SPA全盛の現代にはあまりそぐわないですが、ご紹介しておきます。

SubmitボタンでActionをオーバーライドする

　実は、HTML5から新たに属性が追加されており、これを指定することでFormのパラメータをオーバーライドすることができます。

　以下のようなフォームの内容を、押したsubmitボタンによって複数のエンドポイントに送信できるボタンを追加してみます。

<form action="xxx" method="post">
  <input type="text" name="param1" value="value1">
  <input type="text" name="param2" value="value2">
  <input type="text" name="param3" value="value3">
  <button type="submit">submit</button>
</form>

　こういったとき、従来はJavaScriptを使用してformのactionを送信前に変更したり、どのボタンが押されたかを持っておきサーバー側でハンドリングするしか手段はありませんでした。

　しかし、HTML5では、formactionなどの要素が新たに追加されたことにより、formの内容の送り先をオーバーライドすることができます。

<form action="xxx" method="post">
  <input type="text" name="param1" value="value1">
  <input type="text" name="param2" value="value2">
  <input type="text" name="param3" value="value3">
  <button type="submit" formaction="yyy">submit</button>
  <button type="submit" formaction="zzz">submit</button>
</form>

　あまり使うことはないかもしれませんが、いちいちJavaScriptを書かなくていいので便利ですね。

その他のオーバーライド

　Action以外にも、様々なフォーム要素をオーバーライドすることができます。

　つまり、formを接頭辞に付けた属性を記述することで、フォームの属性を変更することができるというわけです。これで、たとえばmethodを変更することでGETとPOSTをボタンによって使い分けたり、target属性を変更することで新規タブで開くなどの制御をすることができます。

まとめ

　使い所があるかは微妙ですが、簡単なサイトを突貫で仕上げるときに役立つときが来るかもしれません。