HTML のフォームの送信ボタンごとに挙動を変える2021年12月03日 21時29分

この記事は HTML アドベントカレンダーの 3 日目の分です。


フォームの送信先 URL や送信に使う HTTP メソッドは、基本的には form 要素の属性に記述します。送信先 URL なら action 属性、HTTP メソッドなら method 属性ですね。

しかし、ときには「この送信ボタンを実行したときだけ、通常と違う送信先 URL に送信したい」と思うかもしれません。それを実現するのが送信ボタン (<button type="submit"> 要素や <input type="submit"> 要素など) の formaction 属性です。

以下の例では、「保存する」ボタンを実行すると URL /edit に送信されますが、「削除する」ボタンを実行すると URL /delete に送信されます。

<form method="post" action="/edit">
  ...
  <p>
    <button type="submit">保存する</button>
    <button type="submit" formaction="/delete">削除する</button>
  </p>
</form>

formaction 属性以外にも formmethodformtargetformenctypeformnovalidate 属性が存在し、それぞれ form 要素の methodtargetenctypenovalidate 属性の値を上書きできます。