ボタンを押すと勝手に送信される？buttonのtypeとフォームの基本

「閉じる」を押しただけなのに、フォームが送信された。そんなときは、クリック処理を追う前にbuttonのtypeを確認してみよう。見た目が同じボタンでも、HTMLの役割が違うことがあるよ。

送信用と、画面操作用を分けよう

MDNのbutton要素の説明では、フォームに関連付けられたボタンでtypeを省略すると、標準はsubmitになる。JavaScriptで操作を追加していても、ボタン本来の送信動作が残っている場合があるね。

resetは、いつでも入力欄を空にするという意味ではない。初期値がある項目はその値に戻るので、必要性を考えて設置したいね。

送信回数を表示する小さな例

次の例は、サーバーへ送らずにsubmitイベントの回数を表示する練習用。HTMLファイルとして保存して開くと試せるよ。

<form id="demo">
  <label>メモ <input name="memo"></label>
  <button type="button" id="add">補助操作</button>
  <button type="submit">送信を試す</button>
</form>
<p id="result" aria-live="polite">送信：0回</p>
<script>
  let count = 0;
  document.querySelector('#demo').addEventListener('submit', (event) => {
    event.preventDefault();
    count += 1;
    document.querySelector('#result').textContent = `送信：${count}回`;
  });
  document.querySelector('#add').addEventListener('click', () => {
    document.querySelector('[name="memo"]').value = '確認用メモ';
  });
</script>

「補助操作」でメモが入り、回数は0のまま。「送信を試す」で1回になることを確認しよう。次に補助操作のtypeを外すと、同じ操作が送信にもつながることを比べられる。実際の保存や通信は実装していない例だよ。

clickだけでなくsubmitも確認する

送信処理を送信ボタンのclickだけに結び付けると、Enterなど別の経路を見落としやすい。フォームのsubmitを入口にして、入力チェックや送信中の表示を整理すると、確認箇所をまとめやすいよ。

1. フォーム内と、form属性で関連付けたボタンを探す。
2. 送信に使わないボタンへtype="button"を明記する。
3. Tabで移動し、EnterやSpaceでも役割どおり動くか見る。
4. 入力エラーと送信後の表示まで確かめる。

本番のフォームで試す前に、送信先がテスト環境かを確認してね。ブラウザ上の送信回数だけでなく、通信先で重複処理が起きない設計も別途必要になるよ。