プレビューを押すと送信される？フォーム内のbuttonのtypeを実験する

今回の仕上がり

フォームの中に「プレビュー」を足したら、入力内容が送信されることがあります。ボタンにclickイベントを書いたことと、既定の送信動作を止めたことは別です。同じフォームに2つのボタンを置き、違いを回数で表示する例を作りました。

2種類のプレビューを1回ずつ押し、プレビュー2回とsubmitイベント1回が表示された実画面 — 比較用フォームの実画面。submitはイベント内で止めており、外部への送信はありません。タップして拡大できます。

2つのボタンを比べる

「type省略のプレビュー」を押します。プレビューとsubmitイベントが1回ずつ増えます。
「type指定のプレビュー」を押します。プレビューは2回、submitイベントは1回のままです。
「回数を0に戻す」を押すと表示を初期化できます。こちらはフォームの外に置いたtype="button"です。

<form id="demo">
  <button id="implicit">type省略</button>
  <button id="explicit" type="button">type指定</button>
</form>

// 比較のため、実際の送信だけを止める
demo.addEventListener("submit", event => {
  event.preventDefault();
  // submitの回数を増やす
});

この抜粋は2種類の指定と送信の抑止を示したものです。回数を表示する処理は配布HTMLに入っています。MDNのbuttonの説明では、フォームに関連付いたボタンのtype省略時はsubmitが既定値とされています。見た目の文言を「プレビュー」に変えても、その既定値は変わりません。

企画時にはLTech様のbuttonを使うHTML投稿を確認しました。この自作例はフォームとの関連付けと既定の送信動作を比較しています。TabやEnterからの操作にも意味があるため、単にdivへ置き換える対処はしていません。

送信するボタンと分ける

入力内容を送る役はtype="submit"、画面内のプレビューなど送らない役はtype="button"と、用途に合わせて指定します。フォームの外にあるボタンでも、form属性でフォームに関連付ける場合があります。この実験はform属性やEnterによる暗黙の送信の全組み合わせまでは扱っていません。

サンプルのpreventDefault()は安全に比較するための処理です。実際に送信する必要があるフォームへ、そのまま一律に追加する手順ではありません。入力エラーの伝え方はフォームのエラー表示、押す範囲の違いは余白とボタンの範囲で確認できます。

2026年10月20日、隔離したEdgeでPC・375px幅、ライト・ダークの操作を確認。HTMLとCSSは編集部の自作・CC0です。ZIPを展開してexample.htmlを開くと試せます。スマホ実機、全ブラウザ、実際のサーバーへの送信は未確認です。