過去バージョン

結論: type="button" を明示する

の内側にある は、type を省略すると submit 扱いになります。クリックや Enter キーで意図せずフォームが送信され、ページがリロードされたり API が叩かれたりします。これを防ぐ最も簡単な方法は、ボタン側に type="button" を書くことです。

行を追加 保存

button 要素の type 一覧

JavaScript で止める

既存コードで type を書き換えられない、または条件によって送信したいときは preventDefault() を使います。

// クリック時に止める
document.querySelector('#myBtn').addEventListener('click', e => {
  e.preventDefault();    // submit 動作キャンセル
  // ここで自前処理
  doSomething();
});

// onclick 属性内なら return false でも止まる（古典）
// 押す

Enter キー暗黙送信を止める

type="button" でも、フォーム内のテキスト入力でEnter キーを押すと、フォーム内で最初に見つかった type="submit" ボタン（もしくはデフォルト挙動）で送信されます。送信を全面禁止したい場合は、form の submit イベント自体を止めます。

const form = document.querySelector('#searchForm');
form.addEventListener('submit', e => {
  e.preventDefault();      // どんな経路でも送信させない
  // ここで Ajax / 自前処理
  fetchResults(form.elements.q.value);
});

あるいはテキスト入力の Enter キーを個別に止める方法もあります。

input.addEventListener('keydown', e => {
  if (e.key === 'Enter') {
    e.preventDefault();
  }
});

form の外にボタンを出す / 関連付け替え

レイアウト上どうしても form の中に置きたいが、送信対象にしたくないケースでは、HTML5 の form 属性で所属を切り替えることもできます。

  
  B を送る

2 つ以上の送信ボタンを使い分ける

「下書き保存」「公開」のように同じ form で複数の送信先を持ちたいときは、formaction / formmethod 属性で個別に上書きできます。

  

  保存
  公開
  プレビュー

アクセシビリティ上の補足

「クリックできる装飾」を作りたいときに