"フォームを作成する際には、サブミットボタン以外はボタンにtype="button"を設定する習慣をつけることは非常に大切だと思います。思いもよらぬ挙動やバグを未然に防ぐことができます。
またJavaScriptで特別な動作を実装する場合は必ずtype="button"を使うのが良いと思います。
UIフレームワークをラップして使う場合はデフォルトを設定しなおして使うのも良いですね。! この記事は僕がtype="button"をつけずに実装し、実際に予想外の挙動に遭遇した体験が元になっています。
"
ボタンには常にtype="button"をつけよう
https://zenn.dev/fujiyama/articles/496e5e81ba7df9
私もこの問題が生じた。formタグはほとんど使わないのだけど、使う必要があって、後に新たなボタンが必要になってbuttonタグをform内のボタンの横に設置してonClickでJavascriptの関数を実行しようとしたところ、ページが再読み込みしてしまい、formのtextarea内の文字列が変わってしまうトラブルが生じた。 #Gemini に相談したらtype="button"を付ければ良いと教えてくれたのだけど、理由が分からなかったので検索して調べて、必要な理由が分かった。
"type
このボタンの既定の動作です。以下の値が指定可能です。
submit: このボタンはフォームのデータをサーバーへ送信します。これはこの属性が<form>に関連付けられたボタンに指定されていない場合、またはこの属性が空であったり不正な値であったりした場合の既定値です。reset: このボタンはすべてのコントロールを初期値に初期化します。 <input type="reset"> と同様です。 (この動作はユーザーを困らせる傾向があります。)button: ボタンには既定の動作がなく、既定では押されても何も行いません。この要素のイベントを待ち受けし、イベントが発生すると起動されるクライアント側スクリプトを設定することができます。"
: ボタン要素 - HTML: ハイパーテキストマークアップ言語 | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/button
formタグの外にあれば問題なく、普段はformタグを使ってなかったので、type="button"が必要なくて、気づかなかった。
コメント