ミスをキャッチするフォーム

訪問者がメッセージを残す——足りないものを丁寧に指摘するフォーム。

見てみよう：HTML のフォーム

フォームは訪問者が入力するフィールドの集まり：

<form id="message-form">
  <label for="name">Your name</label>
  <input id="name" type="text" placeholder="Jake">

  <label for="message">Message</label>
  <textarea id="message" placeholder="Hi! You have an awesome website."></textarea>

  <button type="submit">Send message</button>
</form>

<p id="confirmation"></p>

<form> がフォーム全体を包む。<input> は1行フィールド、<textarea> は複数行。
<label> はフィールドのキャプション——for と id でペア（ラベルをクリックするとフィールドにジャンプ）。
placeholder はグレーのヒント文字。
type="submit" のボタンがフォームを送信。

きれいに見せる CSS：

form {
  display: flex;
  flex-direction: column;   /* fields stacked vertically */
  gap: 8px;
  max-width: 400px;
}

input, textarea {
  font: inherit;
  padding: 10px;
  border: 1px solid #d6d3d1;
  border-radius: 8px;
}

.error {
  border-color: #dc2626 !important;
  background-color: #fee2e2;
}

flex-direction: column で flexbox を横から縦に：子が上から下に並ぶ。

見てみよう：JavaScript でチェック

const form = document.getElementById("message-form");
const name = document.getElementById("name");
const message = document.getElementById("message");
const confirmation = document.getElementById("confirmation");

form.addEventListener("submit", (event) => {
  event.preventDefault();   // stop the normal submit (the page would reload)

  // Clear old error marks
  name.classList.remove("error");
  message.classList.remove("error");

  // Check that fields are filled in
  if (name.value.trim() === "") {
    name.classList.add("error");
    confirmation.textContent = "You forgot your name. 🙂";
    return;
  }

  if (message.value.trim() === "") {
    message.classList.add("error");
    confirmation.textContent = "So what do you want to tell me? Write something.";
    return;
  }

  // Everything's fine
  confirmation.textContent = "Thanks for the message, " + name.value + "! 💌";
  form.reset();   // empty the fields
});

新しいもの：

submit – 「フォームが送信される」イベント。ボタンじゃなくフォームで待つ。
event.preventDefault() – 「普通にやることをしない。」これがないとページが再読み込みされてスクリプトが動かない。
.value – フィールドに入力されたもの。.trim() で前後のスペースを除去（「」も空扱い！）。
return – 関数をすぐ終了（これ以上チェックする意味なし）。

💡

メッセージはどこへ？ まだどこにも——受け取るサーバーがない。チェックしてお礼を言うだけ。でもこの場所を覚えて：レベル3で本物のサーバーとゲストブックを作り、このフォームをつなぐ。そうすればメッセージが本当に保存される！

やってみよう 💪

プロジェクトに合うフォームを追加。入力チェック付き：

🏫 学校へのメッセージ – 名前 + メッセージ（例と同じ）。
🙋 連絡して – 名前 + メッセージ、「好きなゲーム」フィールドも追加OK。
🌍 旅行の提案 – 名前 + 「次はどこに行きたい？なぜ？」
⚽ 練習参加申込 – 名前 + 年齢（<input type="number">）+ 年齢が入力され6以上かチェック：if (age.value < 6) { ... }。

⚠️

プロのセキュリティ習慣： ユーザーが入力したものを信用しない。常にチェック——空フィールド、意味のない年齢、長すぎるテキスト。今日は礼儀のため；本番アプリでは攻撃者への第一の防御線。

✅

確認： 空のフォームを送信するとフィールドが赤くなりメッセージ表示。入力済みなら名前でお礼を言ってクリア。丁寧、フレンドリー、プロフェッショナル。

このレッスンのまとめ

フォーム：<form>、<input>、<textarea>、<label>、submit イベントと preventDefault()。
.value.trim() = ユーザーが入力したもの（前後のスペースなし）。
ユーザー入力は常にチェック——安全なプログラミングの基礎。