そのボタン、フォームを送信してない？HTMLの type=”button”

• 2026.10.04

フォームに「入力内容を確認」「項目を追加」などのボタンを置いたら、クリックしただけで送信されてしまった。そんなときは、<button> の type を確認してみてください。

type を省略するとどうなる？

フォームに関連付いた <button> は、type を省略すると基本的に送信ボタンとして働きます。送信以外の操作に使うボタンなら、type="button" を明示しておくと安心です。

フォーム内では役割を書き分ける

例えば、確認用のボタンと送信用のボタンが並ぶフォームなら、こんな書き方です。

<form>
  <label>お名前 <input name="name" required></label>
  <button type="button" id="check-name">入力内容を確認</button>
  <button type="submit">送信する</button>
</form>

type="button" は、それだけでは何もしません。「入力内容を確認」を押したときの処理はJavaScriptなどで別途用意します。上のコードはボタンの役割を示す例なので、実際のフォームでは送信先や処理も設定してください。

こんな場面でチェック

モーダルを開く、入力欄を増やす、パスワード表示を切り替えるなど、フォームの途中で使う操作ボタンはうっかり省略しがちです。逆に送信するボタンは type="submit" と明記しておくと、コードを読む人にも意図が伝わります。

参考：HTML Standard「The button element」