【HTML】formタグ内でボタン要素をクリックしたときにSubmit（リロード）されない方法！

あきぞらです。

フロントエンドの開発で、

フォームを実装する場面は多々あると思います。

そんなとき、formタグのなかに設置したButton要素をクリックしたときに、

リロードが走ってしまった経験はないでしょうか。

今回は、それを防ぐ方法を紹介していきます。

ボタンをただのボタンとして認識させる

Button要素は、デフォルトでtypeがSubmitになっています。

そのため、明示的にtypeをbuttonに設定させてあげることで、

サブミットされる（リロードされる）ことを防ぐことができます。

<div>
  <form>
    <button type="button">押してもSubmitされないボタン</button>
  </form>
</div>

フォームを作るときの助けになれば幸いです！