HTML
フォームの送信ボタンが動かない
type="submit" の書き忘れ
こんな症状
フォームの送信ボタンを押しても何も起きない。フォームを初めて作るときに遭遇しやすいよ。
まず試す
<button type="submit"> にし、<form action="..."> の中に置く。
html
<form action="/submit" method="POST">
<button type="submit">送信</button>
</form>これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓ボタンが type=submit でない
→ type="submit" を明示する。 - ✓form で囲まれていない / action が無い
→ <form action="送信先"> で囲む。 - ✓JSで送信を止めている
→ e.preventDefault() を呼んでいないか確認する。
なぜ起きる？
ブラウザはform内のtype="submit"ボタンがクリックされたときにフォームを送信するよ。buttonタグのtype属性が"button"になっていたり、そもそもformタグで囲まれていなかったりすると、送信処理が発動しないんだ。JavaScriptでpreventDefault()が呼ばれている場合も送信されないよ。
✕ エラーが起きるコード
<form><button>送信</button></form>
<!-- action 属性がない -->✓ 直したコード
<form action="/submit" method="POST"><button type="submit">送信</button></form>✅ 直ったか確認
送信ボタンで Networkにリクエストが出る、または期待の遷移が起きればOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- リンクをクリックしても何も起きない — href 属性の書き忘れ
- required属性が効かない（フォームバリデーション） — 送信のしかたがバリデーションを通っていない
- フォームの送信ボタンが反応しない（buttonのtype属性） — ボタンとformの紐づきに問題がある
- iframe の sandbox で JS が動かない — iframeのsandbox属性でJSが動かない
- 画像が表示されない — 画像パスが間違っている
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説