【HTML】formaction属性でactionをbuttonやinputによって切り替える方法

経緯

弊社のシステム作成時に権限によって送信ボタンを切り替えるという機能が必要となり、formaction属性を利用し実装しました。

formaction属性はとても便利と感じたので実装方法をご説明させていただきます。

実装方法

<button>にformaction属性を追加しURLを指定します。
下記では<form>のaction属性を記載していませんが、<form>のaction属性がある場合、formaction属性の方が優先されます。

<form class="form-class" method="POST">
  <button type="submit" formaction="送信先URL">送信ボタン1</button>
  <button type="submit" formaction="送信先URL">送信ボタン2</button>
</form>

また<input>にも使うことができます。

<input type="submit" value="送信" formaction="送信先URL">
<input type="image" src="formaction.jpg" al="送信" formaction="送信先URL">

まとめ

formaction属性を知るまでは、JSやPHPの記述で切り替えたりしていましたが、保守性が悪いなと感じていました。formactionであれば<button>や<input>に直接記述しているため可読性が高くなります。

他にも

・formnovalidate(required属性がついているフォームのバリデーションを無効にする)
・formenctype(フォーム送信のエンコード・タイプを指定)
・formmethod(フォーム送信のHTTPメソッドを指定)
・formtarget(フォーム送信の開き方を指定)

など便利な属性があるようです。
JSで大抵の問題は解決できそうですが、便利な属性があるのであればソースコードを増やさない意味でも使っていくべきと感じました。

HTMLの属性に限らずですが、プログラム言語の情報は日々アップデートされているので情報収集を欠かさず、良いシステムを作れるように今後も努めたいと思います。