ボタンには常にtype="button"をつけよう

結論 ボタンを実装する際には、フォームのサブミットボタンでなければtype="button"をつけた方が良いです。 なぜか HTMLのボタン要素は3つのtype属性を持つことができます。 submit type="submit"のボタンはフォームのデータをサーバーへ送信します。 button type="button"のボタンは規定の動作がなく、イベントハンドラーを渡して使うのが一般的となります。 reset type="reset"のボタンは すべてのコントロールを初期値の初期化します。<input type="reset"> と同様です。 そしてデフォルトのtype属性の値はsubmitです。 つまりtype属性を指定せずにボタンを置くとtype="submit"として動作します。 起こった問題 予想外の挙動をするパターン1 以下は郵便番号と住所を入力するシンプルなフォームです。 郵便

[himabato]

“サブミットボタン以外はボタンにtype="button"を設定する習慣をつけることは非常に大切だと思います。思いもよらぬ挙動やバグを未然に防ぐことができます。”

[strawberryhunter]

<button>が初めて登場した時はsubmitがデフォルトではなかったような気がするんだけど気のせいかな。今でもよく付け忘れて画面リロードしちゃう。

[yarumato]

“type属性を指定せずにボタンを置くとtype="submit"として動作します。サブミットボタン以外はボタンにtype="button"を設定する習慣をつけると未然に防ぐ”