レッスン5：フォームを作ろう

⏱ 約25分やってみよう 1 クイズ 1

📋 前提知識：レッスン4：リストと表を完了してください

🎯 このレッスンで学ぶこと

formタグでフォームの入れ物を作れます。
inputタグのtype属性で入力欄の種類を変えられます。
labelタグで入力欄に説明をつけられます。
buttonタグで送信ボタンを作れます。

📖 前回の復習（レッスン4）

<ul>+<li> で箇条書き、<ol>+<li> で番号付きリストを作る
<table>・<tr>・<th>・<td> で表を作る
リストと表を使うと情報を整理して見せられる

📖 導入 — 入力フォームはどこにでもある

ウェブサイトを使っていると、名前やメールアドレスを入力したり、「はい / いいえ」を選んだり、「送信」ボタンを押したりする場面によく出会いますよね。これらはすべて フォーム で作られています。このレッスンでは、フォームの基本的な作り方を学びましょう！

ログイン画面、検索バー、お問い合わせページ、アンケート…全てフォームです。Webアプリを作るなら必須の知識です。

💡 フォームの仕組み:
① ユーザーがフォームに入力
② 「送信」ボタンを押す
③ データがサーバーに送られる
④ サーバーが処理して結果を返す
このレッスンでは①②のHTML部分を学びます。③④はサーバーサイドの知識が必要です。

📝 フォームの書き方

フォームの入れ物：`}>

フォーム全体を <form> タグで囲みます。

<form>
  <!-- ここにフォームの部品を入れる -->
</form>

入力欄：`}>

type 属性を変えることで、いろいろな種類の入力欄を作れます。

<!-- テキスト入力 -->
<input type="text" placeholder="名前を入力してください">

<!-- メールアドレス入力（形式チェックあり） -->
<input type="email" placeholder="[email protected]">

<!-- パスワード入力（文字が隠れる） -->
<input type="password" placeholder="パスワード">

<!-- ラジオボタン（1つだけ選ぶ） -->
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性

<!-- チェックボックス（複数選べる） -->
<input type="checkbox" name="hobby" value="soccer"> サッカー
<input type="checkbox" name="hobby" value="music"> 音楽

▶ プレビュー

💡 その他の input type:
・type="number": 数値入力（上下ボタン付き）
・type="date": 日付選択（カレンダー表示）
・type="color": 色選択（カラーピッカー表示）
・type="range": スライダー
ブラウザが自動で適切なUIを表示してくれます。

送信ボタン：`}>

<button type="submit">送信する</button>

▶ プレビュー

複数行の入力欄：`}>

複数行のテキストを入力できる欄を作ります。

<input type="text"> との違いは、改行できることです。お問い合わせフォームのメッセージ欄などに使います。

<label for="message">メッセージ：</label>
<textarea id="message" rows="5" placeholder="メッセージを入力してください"></textarea>

ラベル：`}>

<label> を使うと、ラベルのテキストをクリックしても入力欄が選択されるようになります。スクリーンリーダーにも正しく読み上げられます。for 属性と <input> の id 属性を同じ値にして紐づけます。

<label for="username">名前：</label>
<input type="text" id="username" placeholder="名前を入力">

▶ プレビュー

💡 <label> を使うと、特にラジオボタンやチェックボックスが格段に押しやすくなります。ぜひ習慣にしましょう。

🔗 for と id の紐づけの仕組み:

<label for="email">メール:</label> ──┐
│ for="email" と id="email" が一致！
<input id="email" type="email"> ──┘

✅ for と id の値を同じにすると、ラベルをクリックしたとき入力欄が選択されます。
✅ アクセシビリティにも重要 — スクリーンリーダーが「この入力欄は何のためか」を正しく読み上げます。

ドロップダウン：`}>

選択肢が多いときはドロップダウンメニューが便利です。

<label for="pref">都道府県：</label>
<select id="pref" name="pref">
  <option value="">選択してください</option>
  <option value="tokyo">東京</option>
  <option value="osaka">大阪</option>
  <option value="fukuoka">福岡</option>
</select>

▶ プレビュー

💡 required 属性:
入力欄に required を追加すると、空のまま送信しようとしたときにブラウザが警告を出します。
<input type="text" id="name" required>
ユーザーに必ず入力してほしい項目に使いましょう。

💡 action と method（予告）:
<form action="/submit" method="POST"> のように書くと、フォームのデータをサーバーに送信できます。action は送信先URL、method は送信方法です。サーバー側の処理はこのコースでは扱いませんが、実際のWebアプリでは必須の知識です。

💻 やってみよう！

VS Codeで my-practice フォルダの index.html を開いてください。（前のレッスンのファイルを上書きして使います）

index.html の <body> を以下のように書き換えてください。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>フォームの練習</title>
  </head>
  <body>
    <h1>かんたんアンケート</h1>

    <form>
      <p>
        <label for="name">名前：</label>
        <input type="text" id="name" placeholder="名前を入力してください">
      </p>

      <p>性別：</p>
      <p>
        <input type="radio" name="gender" id="male" value="male">
        <label for="male">男性</label>
        <input type="radio" name="gender" id="female" value="female">
        <label for="female">女性</label>
        <input type="radio" name="gender" id="other" value="other">
        <label for="other">その他</label>
      </p>

      <p>好きなこと（複数選べます）：</p>
      <p>
        <input type="checkbox" id="sports" name="hobby" value="sports">
        <label for="sports">スポーツ</label>
        <input type="checkbox" id="music" name="hobby" value="music">
        <label for="music">音楽</label>
        <input type="checkbox" id="game" name="hobby" value="game">
        <label for="game">ゲーム</label>
      </p>

      <button type="submit">送信する</button>
    </form>
  </body>
</html>

💡 今の段階では「送信する」を押しても何も起きません。これは正常な動作です。HTMLだけではフォームのデータを処理できません。フォームのデータを処理するにはサーバーやJavaScriptが必要です。JavaScriptコースで学びましょう！

✅ 正しく表示されると、こうなります：
・名前を入力できるテキスト欄が表示される
・「男性」「女性」「その他」のラジオボタンが表示される（1つだけ選べる）
・「スポーツ」「音楽」「ゲーム」のチェックボックスが表示される（複数選べる）
・「送信する」ボタンが表示される
・「送信する」を押しても何も起きません。これは正常な動作です。

自由課題: アンケートを充実させよう

<select> で「好きな教科」のドロップダウンを追加しよう
<textarea> で「自由コメント欄」を追加しよう
名前欄に required を追加して、空のまま送信を試してみよう

⚠️ よくあるミス

ラジオボタンの name を揃え忘れる：同じグループのラジオボタンには同じ name を指定しましょう。name が違うと、複数選べてしまいます。
label の for と input の id が一致していない：<label for="username"> と <input id="username"> の値を同じにしないと紐づきません。
input タグに閉じタグを書いてしまう：<input> は空要素なので </input> は不要です。
select の option に value を書き忘れる：value がないと、送信時にどの選択肢が選ばれたかサーバーに伝わりません。

📌 まとめ

タグ・属性	役割
`<form>`	フォーム全体の入れ物
`<input type="text">`	テキスト入力欄
`<input type="email">`	メールアドレス入力欄（形式チェックあり）
`<input type="password">`	パスワード入力欄（文字が隠れる）
`<input type="radio">`	ラジオボタン（1つだけ選択）
`<input type="checkbox">`	チェックボックス（複数選択可）
`<button type="submit">`	送信ボタン
`<textarea>`	複数行のテキスト入力欄
`<label for="...">`	入力欄のラベル。`id` と紐づける