🚀 プログラミング学習

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

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

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

📝 フォームの書き方

フォームの入れ物：<form>

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

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

入力欄：<input>

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

<!-- テキスト入力 -->
<input type="text" 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"> 音楽

送信ボタン：<button>

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

ラベル：<label>

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

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

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

💻 やってみよう！

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

<!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>

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

📌 まとめ

タグ・属性役割
<form>フォーム全体の入れ物
<input type="text">テキスト入力欄
<input type="radio">ラジオボタン（1つだけ選択）
<input type="checkbox">チェックボックス（複数選択可）
<button type="submit">送信ボタン
<label for="...">入力欄のラベル。id と紐づける

🚀 次のレッスンへ

次のレッスンでは、div と span を使ってページ全体を整理する方法を学びます！

🔍 もっと調べてみよう：「HTML フォーム input 種類」で検索してみよう。わからないことはどんどん検索する習慣をつけよう！
← HTMLコース一覧に戻る