formaction属性でボタン毎に送信先を変更する

以前にJavaScriptでformのボタン毎に送信先を変更する記事を掲載しましたが、HTML5で追加された属性でもできるようだったので試してみます。

サンプルコード

ボタンにformaction属性で遷移先URLを指定すればOKです。
formaction属性はformに設定したaction属性より優先されます。

<form action="./publish.html" method="get">
	<input type="text" name="title" placeholder="記事タイトル" value="ブログ記事名">
	<button formaction="./save.html">下書き保存</button>
	<button formaction="./preview.html" formtarget="_blank">プレビュー</button>
	<button>公開</button>
</form>

「下書き保存」と「プレビュー」はformaction属性で指定したURLに送信、「公開」はformaction属性を指定していないのでformのaction属性のURLに遷移します。
フォーム送信のデモページ

ボタンに設定できる送信時の設定は他にもいくつかあり、例えば上記サンプルのプレビューで設定しているformtarget属性は送信先の表示情報を指定できます。