目次
- はじめに：送信ボタンを押しても「何も起きない」恐怖
- 結論：フォーム送信は「構造」が9割
- まず確認：最小構成の正しいフォーム
- 原因①：formタグが存在しない
- NG
- 原因②：actionが間違っている
- よくあるミス
- 原因③：methodの理解不足
- 原因④：submitボタンが存在しない
- NG
- 正解
- 原因⑤：name属性がない
- 原因⑥：requiredがブロックしている
- 原因⑦：JavaScriptで止めている
- 確認方法
- 原因⑧：novalidateが付いている
- 原因⑨：CSSでクリックできない
- 原因⑩：buttonがform外にある
- DevToolsでの確認手順（実務必須）
- ① Elementsで構造確認
- ② Networkタブ確認
- ③ Console確認
- 横スクロールやスマホ崩れが原因になるケース
- よくある初心者の誤解
- フォーム送信トラブルチェックリスト
- HTML・CSS・JSの役割整理
- まとめ：フォーム送信できない＝基本を疑え
はじめに：送信ボタンを押しても「何も起きない」恐怖
フォームを作ったのに、
- 送信ボタンを押してもページが変わらない
- エラーも出ない
- コンソールにも何も出ない
…これ、地味に焦りますよね。
私も最初に遭遇したとき、「サーバー壊れた？」と思いました。
でもほとんどの場合、原因はシンプルです。
HTMLの基本構造ミスです。
この記事では、フォームが送信できない原因を
構造レベルから徹底的に分解していきます。
結論：フォーム送信は「構造」が9割
HTMLフォームが送信できない原因の大半は：
- form構造の不備
- submit設定ミス
- name属性忘れ
- JSによる送信キャンセル
- CSSでクリック不能
です。
順番に確認すれば、必ず解決できます。
まず確認：最小構成の正しいフォーム
これが動作確認用の最小構成です。
<form action="send.php" method="post">
<input type="text" name="name">
<button type="submit">送信</button>
</form>まずはこれを作って動くか確認しましょう。
動かないなら環境問題。
動くなら追加コードが原因。
原因①：formタグが存在しない
意外と多いです。
NG
<input type="text" name="name">
<button type="submit">送信</button>formが無いと送信という概念自体がありません。
原因②：actionが間違っている
actionは送信先URL。
<form action="send.php" method="post">よくあるミス
- パスが間違っている
- PHPファイルが存在しない
- 相対パスのミス
DevToolsの「Network」タブで確認できます。
原因③：methodの理解不足
methodを省略するとデフォルトはGET。
<form action="send.php">サーバー側がPOST前提だと処理されません。
明示しましょう。
method="post"原因④：submitボタンが存在しない
NG
<button type="button">送信</button>type="button"は送信しません。
正解
<button type="submit">送信</button>または
<input type="submit" value="送信">原因⑤：name属性がない
これ、超重要です。
<input type="text" required>送信はされます。
でもサーバーには何も届きません。
必ず：
<input type="text" name="name">nameは送信データのキーです。
原因⑥：requiredがブロックしている
<input type="text" name="name" required>未入力ならブラウザが送信を止めます。
エラーが見えない場合は：
- フォーム外にスクロールしていないか
- CSSでエラーバブルが隠れていないか
確認しましょう。
原因⑦：JavaScriptで止めている
よくある犯人。
event.preventDefault();バリデーションJSが送信を止めているケース多数。
確認方法
- DevToolsを開く
- Consoleにエラーが出ていないか
- Event Listenersを確認
原因⑧：novalidateが付いている
<form novalidate>これがあるとブラウザバリデーションは無効。
フレームワーク使用時に入っていることがあります。
原因⑨：CSSでクリックできない
見た目は押せるのに反応しない。
button {
pointer-events: none;
}または：
- z-indexで覆われている
- position:absoluteで重なっている
DevToolsでボタンを検証すれば分かります。
原因⑩：buttonがform外にある
<form>
<input type="text">
</form>
<button type="submit">送信</button>これでは送信されません。
DevToolsでの確認手順（実務必須）
送信できないときは：
① Elementsで構造確認
- formが正しく閉じているか
- buttonはform内か
② Networkタブ確認
- リクエストが発生しているか
- ステータスコードは？
③ Console確認
- JSエラー出ていないか
ここまでやれば必ず原因は見つかります。
横スクロールやスマホ崩れが原因になるケース
- ボタンが画面外にある
- フォームがoverflow:hiddenで隠れている
- スマホでタップ領域が重なっている
レスポンシブ時は特に要注意。
よくある初心者の誤解
- HTMLが壊れていると思い込む
- サーバーが悪いと疑う
- CSSは関係ないと思っている
実際は「構造ミス」がほとんど。
フォーム送信トラブルチェックリスト
✔ formで囲まれている
✔ actionが正しい
✔ methodが正しい
✔ submitボタンがある
✔ name属性がある
✔ required未入力ではない
✔ JSで止めていない
✔ CSSでクリック不可になっていない
これで9割解決。
HTML・CSS・JSの役割整理
- HTML：送信構造
- CSS：見た目
- JavaScript：動作制御
送信自体はHTMLの責任です。
まとめ：フォーム送信できない＝基本を疑え
フォームが送信できないときは、
まず最小構成に戻す。
そこから1つずつ機能を足す。
焦らず構造を確認すれば、
必ず原因は見つかります。
フォーム設計はWeb制作の基礎。
ここを理解すると、
一気にレベルが上がります。