サイト制作

フォームのボタンで意図せず送信される？typeを明示しよう

慈愛妃きづな

2026-11-01

この記事には広告・アフィリエイトリンクが含まれます。

画面を切り替えるだけのボタンがフォームを送信する場合は、button要素のtypeを確認します。

送信しないボタンにはtypeを指定

フォーム内に置いたbutton要素が、押すと意図せず送信されることがあります。一般的なフォームでは、typeを省略したボタンが送信ボタンとして扱われるためです。入力欄を増やす、説明を開くなど、送信が目的ではないボタンには、type属性の値をbuttonと明示しましょう。

typeがsubmitならフォームの送信、resetなら入力のリセット、buttonなら標準の送信動作を持たないボタンになります。JavaScriptで何かを処理するボタンも、typeの意味は別に確認します。クリック処理を書いたことだけで、フォームの既定の送信動作が消えるわけではありません。

「確認する」「追加する」などの文言だけでは、HTMLの動作は決まりません。実際に送信するものをsubmit、それ以外をbuttonにしたうえで、表示文言も利用者が予想できる内容にします。入力を消すresetは誤操作の影響が大きいため、必要性を考えてから置きましょう。

変更後は、ボタンを押したときの画面と通信を確認します。加えて、入力欄でEnterを押した場合の送信も、別の操作として確認してください。この記事は標準仕様の説明で、特定のサイトの動作試験結果ではありません。フォームの構造や独自のイベント処理によっては、追加の確認が必要です。