HTML/CSS

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

あきぞらです。

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

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

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

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

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

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

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

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

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

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

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

-HTML/CSS

Copyright© あきぞらてっく , 2025 All Rights Reserved Powered by AFFINGER5.