HTML

formが送信されない

action属性やmethod属性が未設定

こんな症状

フォームの送信ボタンを押してもデータが送られない。フォームのaction属性やJavaScriptの設定に問題があるときに起きるよ。

まず試す

<form> に action（送信先URL）と method を指定し、type=submit のボタンを置く。

html

<form action="/api" method="POST">
  <input type="text" name="q">
  <button type="submit">送信</button>
</form>

これで直らなければ、下の「自分のケース」を確認。

✓送信ボタンを押しても何も起きない
→ <form> に action 属性があるか、type=submit のボタンがあるか確認する。
✓JSで送信を制御している
→ submit イベントで preventDefault() を呼ぶと既定送信が止まる。fetch() 等で手動送信するか、preventDefault を外す。
✓送信されているか分からない
→ DevToolsのNetworkタブでリクエストが飛んでいるか確認する。

<form>タグにaction属性（送信先URL）が書かれていないと、ブラウザはデータをどこに送ればいいかわからないよ。また、JavaScriptでsubmitイベントにpreventDefault()が呼ばれていると、フォームのデフォルト送信動作が止められているんだ。

✕ エラーが起きるコード

<form><input type="text"></form>
<!-- submit ボタンがない -->

✓ 直したコード

<form action="/api"><input type="text"><button type="submit">送信</button></form>

送信ボタンで Networkタブにリクエストが出る、または期待した遷移・レスポンスが返ればOK。

ボタンが <form> の外にある、type=button になっている、といった配置ミスも確認しよう。

この解決法は役立ちましたか？

🚀 HTMLレッスン5：フォームを作ろうで根本解決しよう！

このエラーの背景にある仕組みを、手を動かしながら学べるレッスンがあります。完全無料・登録不要。