← クエスト一覧
フォームの作成とバリデーション
スライド
1
/
2
とばして問題へ
💻 コード例
実行結果
← 戻る
次へ →
クエストを始める
← クエスト一覧
🌐 Web開発総合
/
Quest 5
/ 10
フォームの作成とバリデーション
応用
+10 XP
📖 説明を見る
🏠
📖 課題
💻 コード
結果
今回の課題
送信ボタンを押したとき、名前が空なら "名前を入力してください" と alert を表示しよう！
📖 解説を見る
お問い合わせフォームを HTML で作成し、JavaScript でバリデーション（入力チェック）を実装します。
ヒントを見る
script.js で document.getElementById で input を取得し、value が空かチェックしよう！
🤖 AIに聞く
📄 見本
答えを見る
「答えを見る」を押すと、お手本のプレビューとコードが出ます。
💻 コードエディタ
index.html
style.css
script.js
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Form</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="form-wrap"> <h1>お問い合わせ</h1> <form id="contact-form"> <div class="field"> <label>名前</label> <input type="text" id="name" placeholder="山田太郎"> </div> <div class="field"> <label>メール</label> <input type="email" id="email" placeholder="example@email.com"> </div> <div class="field"> <label>メッセージ</label> <textarea id="message" rows="4" placeholder="お問い合わせ内容"></textarea> </div> <button type="submit" class="btn">送信する</button> </form> <p id="msg"></p> </div> <script src="script.js"></script> </body> </html>
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: sans-serif; background: #f0f4ff; display: flex; justify-content: center; padding: 40px; } .form-wrap { background: white; border-radius: 16px; padding: 40px; width: 100%; max-width: 480px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); } h1 { color: #4f46e5; margin-bottom: 24px; } .field { margin-bottom: 16px; } label { display: block; margin-bottom: 6px; font-weight: 600; color: #374151; } input, textarea { width: 100%; padding: 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; } .btn { width: 100%; padding: 12px; background: #4f46e5; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; margin-top: 8px; } .btn:hover { background: #4338ca; } #msg { margin-top: 12px; color: green; }
document.getElementById("contact-form").addEventListener("submit", function(e) { e.preventDefault(); const name = document.getElementById("name").value; // ここにバリデーションを追加しよう document.getElementById("msg").textContent = ""; });
コードを実行
さいしょから
あなたの出力
正解！ +10 XP
正解！見本と同じになりました。
練習問題へ進む →
クリアをXでシェア
ヒント
実行する
次へ →
🏠 ホームへ
れんしゅうもんだい
☑ 0 / 1 正解
レッスンに戻る
全問正解でクエストクリア！
未挑戦
問題 1: メールが空の場合もアラートを出すようにしよう（自由回答）
index.html
style.css
実行 / プレビュー更新
🖼 プレビュー
実行結果
実行できたよ！
もう一度チャレンジ！
次のクエスト →
コピーしました！
×
先にヒントを見ますか？
ヒントを読むと、自分の力で解けるかもしれません。
ヒントを見る
それでも答えを見る
