HTML
buttonクリックでページがリロードされる
form内のbuttonがデフォルトでsubmitになる
こんな症状
form内のbuttonにtype属性を指定しないとページがリロードされる。ボタンクリックで意図しないリロードが起きるときはこれが原因だよ。
まず試す
送信しないボタンには type="button" を明示する。
html
<button type="button">キャンセル</button>これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓キャンセル等のボタンでリロードされる
→ type="button" を付ける（送信目的でないボタン）。 - ✓送信ボタンのつもり
→ type="submit" を明示する（省略でもsubmitだが明示が安全）。 - ✓JSで処理したいだけ
→ type="button" にし、必要なら onclick で処理する。
なぜ起きる？
form内の<button>はtype属性を省略するとデフォルトでtype="submit"になるよ。そのため、クリックするとフォームが送信されてページがリロードされてしまうんだ。送信目的でないボタン（キャンセルボタン等）にはtype="button"を明示する必要があるよ。
✕ エラーが起きるコード
<button>キャンセル</button>
<!-- type 未指定で submit になる -->✓ 直したコード
<button type="button">キャンセル</button>✅ 直ったか確認
ボタンを押してもページがリロードされず、意図した動作だけ起きればOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- フォームの送信ボタンが反応しない（buttonのtype属性） — ボタンとformの紐づきに問題がある
- formが送信されない — action属性やmethod属性が未設定
- input要素のtype属性ミスで入力欄が意図通りにならない — type属性のスペルミス
- required属性が効かない（フォームバリデーション） — 送信のしかたがバリデーションを通っていない
- 画像が表示されない — 画像パスが間違っている
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説