HTML
🔥 buttonクリックでページがリロードされる
form内のbuttonがデフォルトでsubmitになる
😰 こんな症状
form内のbuttonにtype属性を指定しないとページがリロードされる。ボタンクリックで意図しないリロードが起きるときはこれが原因だよ。
🔍 原因
form内の<button>はtype属性を省略するとデフォルトでtype="submit"になるよ。そのため、クリックするとフォームが送信されてページがリロードされてしまうんだ。送信目的でないボタン（キャンセルボタン等）にはtype="button"を明示する必要があるよ。
❌ エラーが起きるコード
<button>キャンセル</button>
<!-- type 未指定で submit になる -->✅ 直し方
1. 送信しないボタンにはtype="button"を明示する。 2. 送信ボタンにはtype="submit"を明示する（省略してもOKだが明示が推奨）。 3. JavaScriptでe.preventDefault()を使う方法もあるが、type属性で制御する方がシンプルだよ。
✅ 修正後のコード
<button type="button">キャンセル</button>この解決法は役立ちましたか？
🔗 関連するエラー
- フォームの送信ボタンが反応しない — formのsubmitが動作しない
- formが送信されない — action属性やmethod属性が未設定
- input要素のtype属性ミスで入力欄が意図通りにならない — type属性のスペルミス
- フォームバリデーションが効かない — formタグの外にinputがある
- 画像が表示されない — 画像パスが間違っている
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説