HTML
フォームの送信ボタンが反応しない（buttonのtype属性）
ボタンとformの紐づきに問題がある
こんな症状
送信ボタンを押しても何も起きない。buttonのtype属性、ボタンとformの位置関係、JavaScript側のエラーの3つを順に確認すれば原因がわかるよ。
まず試す
ボタンを type=submit にし、<form> の中に置く（外に置くなら form 属性で form の id を指定）。
html
<form action="/send">
<input name="email" type="email">
<button type="submit">送信</button>
</form>これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓ボタンが type=button になっている
→ type=submit にする（form内の button は既定で submit）。 - ✓ボタンが form の外にある
→ form の中に入れる。外に置くなら <button type="submit" form="フォームのid">。 - ✓押しても無反応（JSエラー）
→ F12のConsoleで赤いエラーが出ていないか確認する。preventDefault() で止めていないかも見る。
なぜ起きる？
原因は3系統あるよ。(1) buttonのtype属性：<button>は<form>内ではデフォルトでsubmitとして動くけど、type="button"と書かれていると送信しない。<input type="button">も同様。 (2) 位置関係：ボタンが<form>タグの外にあると送信をトリガーできない。 (3) JavaScript：submitイベントでpreventDefault()している、またはonclickの処理がエラーで止まっている場合も「押しても無反応」に見えるよ（Consoleに赤いエラーが出ていないか確認）。
✕ エラーが起きるコード
<form action="/send">
<input name="email" type="email">
</form>
<!-- ❌ formの外 ＋ type="button" -->
<button type="button">送信</button>✓ 直したコード
<form action="/send">
<input name="email" type="email">
<button type="submit">送信</button> <!-- ✅ form内 ＋ type=submit -->
</form>✅ 直ったか確認
送信ボタンで Networkにリクエストが出る、または期待した遷移が起きればOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- buttonクリックでページがリロードされる — form内のbuttonがデフォルトでsubmitになる
- formが送信されない — action属性やmethod属性が未設定
- フォームの送信ボタンが動かない — type="submit" の書き忘れ
- input要素のtype属性ミスで入力欄が意図通りにならない — type属性のスペルミス
- required属性が効かない（フォームバリデーション） — 送信のしかたがバリデーションを通っていない
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説