以前にJavaScriptでformのボタン毎に送信先を変更する記事を掲載しましたが、HTML5で追加された属性でもできるようだったので試してみます。
サンプルコード
ボタンにformaction属性で遷移先URLを指定すればOKです。
formaction属性はformに設定したaction属性より優先されます。
1 2 3 4 5 6 | <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属性は送信先の表示情報を指定できます。
コメントが承認されるまで時間がかかります。