概要

HTMLフォームで最も多く使われる要素の一つ、<button> タグ。
しかし、このタグを何も指定せずに使うことがバグの原因になると知っている開発者は意外と少ない。

実は <button> は type 属性を明示しないと、自動的に type="submit" として振る舞う。
この挙動により、「ボタンを押しただけでフォームが送信される」「JSのイベントが阻害される」など、意図しない副作用が発生することがある。

本記事では、<button> タグにおける type のデフォルト動作、ユースケースごとの正しい指定方法、よくある落とし穴とその回避策を体系的に解説する。

対象環境

HTML5対応のすべてのブラウザ  
（Chrome / Firefox / Safari / Edge ほか）

<button>クリック</button>

このコードは、見た目には問題ないが、実際には type="submit" として解釈される。

つまり、このボタンが <form> の内部にある場合、押すとフォームが送信される。

意図的に「送信ボタン」として作っていない場合、これは明確なバグである。

type	説明
`submit`	フォームを送信する（デフォルト動作）
`reset`	フォーム内のすべての入力値をリセット
`button`	何もしない。JavaScriptのトリガー用途に使う場合はこれを明示すべき

<form onsubmit="alert('送信されました')">
  <button onclick="console.log('クリック')">押すな</button>
</form>

この場合、ボタンをクリックすると：

→ ボタンに type="button" を指定していれば、送信は起きなかった

<form>
  <button type="button" onclick="console.log('実行')">実行ボタン</button>
</form>

このように、JSによる処理だけをしたい場合は type="button" を明示することで、送信を防げる。

<button type="reset">リセット</button>

たとえばReactにおいても、以下のように指定しないと意図せずsubmitされてしまう。

<button onClick={handleClick}>処理</button> // ← デフォルトで type="submit"

正しくは：

<button type="button" onClick={handleClick}>処理</button>

どれも「typeを書かなかっただけ」で起きる不具合だ。

<button> タグは、その用途によって「明示的に意味を与える」必要がある要素である。

フォーム送信用なのか、リセットなのか、単なるJSのトリガーなのか。
その意図を type で言語化することで、予期せぬバグを未然に防ぎ、意図が明確なコードを実現できる。

HTMLは「書けば動く」ではない。
書き方が伝える意味こそが、バグのないプロダクトを支えている。