HTML buttonクリックでURLを実行（カンタンに実装したい）

経緯

最近、自分の実力をつけるために勉強を色々初めてPython＋Webを進めていました。
適当にBootstrap4を使いながらUI設計をしていました。とくにHTML5やPythonの経験も多いわけでなく、自分の勉強のために今いろいろ作っていて、ハマってしまった内容がありましたのでそのメモです。
※HTMLとCSSの知識は10年ぐらい前にテキストベースのホームページを作っていたぐらいです。JSも全然書けない。
Node.jsとかReactとか、はたまたCSSフレームワークとかの存在なんて知らなかった・・・

#本題

実装する時に、画面に

[完了] [編集] [削除]

こんなかんじでボタンを配置したくなることってないですか？
で、自分の場合はそんな風に置いていたんだけど、URL処理の実装をしても動作しているように思えない。
なんでやー～～～って思ってたので色々調べてた。
コードは以下の通り。

    <button action="comp/{{id}}">完了</button>
    <button action="edit/{{id}}">編集</button>
    <button action="del/{{id}}">削除</button>

URLでIDを渡して、処理終了後にRedirectするつもりだった。

#対策

どうやらformで囲ってあげればいいらしい。
一部ページでは<form action="button-click" method="POST">など固定して、Python側でどのボタンが押されたのかなど、エレメントを解析するみたいな記述もあったが、正直プロトタイピングレベルの内容でそこまでやるか？って思ってた。

で、さらにいろいろと調べていたトコロ、以下の記事を見つけた。

[HTML] button要素をリンクにしたい[追記]

この記事によると、各ボタンで処理を分けたい場合はformactionで定義してあげるといいらしい。
親エレメントのformにかかれているactionを上書きして処理をするためらしい。

というわけで、先程のコードに実装。

<form>
    <button formaction="comp/{{id}}">完了</button>
    <button formaction="edit/{{id}}">編集</button>
    <button formaction="del/{{id}}">削除</button>
</form>

無事、実行できました。

自分のコメント

最近やっとフロントエンド設計、サーバーサイド設計などの概念を理解し始めたトコロ。まだNode.jsがなんなのかもReactがなんなのかもわかっていない自分です。単語の間違いや誤記などありましたらお気軽にコメントや編集リクエストいただけると助かります。