目次
- はじめに：フォームが送信できないときに起きていること
- HTMLフォーム送信の基本構造
- 原因①：formタグが正しく書かれていない
- NG例
- 原因②：action属性が指定されていない
- NG例
- 正しい例
- 原因③：methodの指定ミス
- NG例
- 原因④：送信ボタンのtypeが間違っている
- NG例
- 正しい例
- 原因⑤：inputにname属性が無い
- 原因⑥：requiredによる入力エラー
- 原因⑦：JavaScriptで送信を止めている
- 原因⑧：CSSでボタンが押せない状態になっている
- フォーム送信できないときのチェックリスト
- HTMLフォームとCSS・JavaScriptの役割分担
- まとめ：form送信できない原因は基本ミスがほとんど
はじめに：フォームが送信できないときに起きていること
HTMLでお問い合わせフォームなどを作ったときに、
- 送信ボタンを押しても何も起きない
- ページ遷移しない
- エラーも出ず原因が分からない
といった経験はありませんか？
フォーム送信ができない原因は、
HTMLの基本的な書き方ミスであることがほとんどです。
この記事では、
HTML初心者が必ず一度はつまずく
formが送信できない原因と対処法を
順を追って分かりやすく解説します。
HTMLフォーム送信の基本構造
まずは、正しく動作する最小構成を確認しましょう。
<form action="send.php" method="post">
<input type="text" name="name">
<button type="submit">送信</button>
</form>この構造が、
HTMLフォーム送信の基本形です。
原因①：formタグが正しく書かれていない
formタグの書き忘れや閉じ忘れは、
非常によくある原因です。
NG例
<input type="text" name="name">
<button type="submit">送信</button>inputやbuttonだけでは、
フォームとして認識されません。
原因②：action属性が指定されていない
actionは、
送信先のURLを指定する属性です。
NG例
<form method="post">正しい例
<form action="send.php" method="post">actionが空だと、
意図しない挙動になることがあります。
原因③：methodの指定ミス
methodには、
get または post を指定します。
NG例
<form action="send.php">methodを省略すると、
デフォルトで get になります。
送信内容によっては
正しく処理されない場合があります。
原因④：送信ボタンのtypeが間違っている
buttonタグを使っている場合、
type属性が重要です。
NG例
<button>送信</button>正しい例
<button type="submit">送信</button>typeを指定しないと、
送信が実行されないケースがあります。
原因⑤：inputにname属性が無い
フォーム送信では、
name属性がデータのキーになります。
<input type="text" name="email">nameが無いと、
送信自体はされても
データが受け取れません。
原因⑥：requiredによる入力エラー
required属性があると、
未入力のままでは送信できません。
<input type="text" name="name" required>ブラウザが自動的に
送信をブロックしている場合もあります。
原因⑦：JavaScriptで送信を止めている
次のようなJavaScriptがあると、
送信がキャンセルされます。
event.preventDefault();バリデーション用のJSが原因で、
送信できないケースも多いです。
原因⑧：CSSでボタンが押せない状態になっている
見た目は表示されていても、
CSSの指定でクリックできないことがあります。
button {
pointer-events: none;
}positionやz-indexの影響で
他の要素に覆われている場合も要注意です。
フォーム送信できないときのチェックリスト
問題が起きたら、次を順番に確認しましょう。
- formタグで囲まれているか
- actionとmethodは正しいか
- submitボタンがあるか
- name属性が設定されているか
- JavaScriptで止めていないか
- CSSでクリックを妨げていないか
ほとんどの場合、
このチェックで原因が見つかります。
HTMLフォームとCSS・JavaScriptの役割分担
初心者が混乱しやすいポイントです。
- HTML：構造と送信
- CSS：見た目
- JavaScript：動作制御
フォーム送信自体は、
HTMLの役割です。
まとめ：form送信できない原因は基本ミスがほとんど
HTMLフォームが送信できない原因の多くは、
- form / action / method の指定ミス
- submitボタンの設定ミス
- JavaScriptやCSSの影響
といった 基本部分の見落としです。
一つずつ確認すれば、
必ず原因は見つかります。
初心者の方は、
まず 最小構成のフォームを作り、
そこから機能を追加していくのがおすすめです。
ぜひ今回の内容を参考に、
フォーム送信の仕組みを理解してみてください。