【HTML】 form 内にある button でも「送信」したくない

こんにちは、さち です。

先日、HTML で項目数の多い <form> を作る機会がありました。

項目を複数ページに分けて「JavaScript」でページを切り替えることにしたんですが、切り替え用の <button> を押すと <form> の送信が行われてしまいます。

type="submit" を付けてない <button> なのに……どうして？

「type="submit"」でなくても「送信」される

サンプルとして次のような HTML を用意しました。

<form>
  <div class="member">
    <input type="checkbox" name="member" value="kozue">
     ︙
    <!-- このボタンでも送信されてしまう -->
    <button>次のページ</button>
  </div>

  <div class="song">
    <input type="checkbox" name="song" value="zanyou">
     ︙
    <!-- このボタンでだけ送信したい -->
    <button type="submit">送信</button>
  </div>
</form>

<form> のデータを「送信」する <button> には属性 type="submit" を付けています。「次のページ」に切り替える <button> には何も付けていません。

しかし、「次のページ」に切り替える <button> をクリックすると、「送信」する <button> と同じ動作をしてしまいます。

「送信」は <button type="submit"> だけで動作して欲しいんだけど……。

解決方法

<form>
  <div class="member">
    <input type="checkbox" value="kozue">
  　 ︙
    <!-- このボタンでは送信されない -->
    <button type="button">次のページ</button>
  </div>

  <div class="song">
    <input type="checkbox" value="zanyou">
     ︙
    <!-- このボタンは送信される -->
    <button type="submit">送信</button>
  </div>
</form>

「通常」のボタンには属性 type="button" を付けることで、「送信」ボタンとして動作することがなくなります。

解決方法はとっても簡単ですが、知らないとハマるので気をつけて下さい。