LTech

レッスン5：HTMLフォーム入門 ─ テキスト・ボタン・ラジオボタンの基本を学ぼう

HTMLでフォームを作成し、ユーザーから情報を受け取る方法を学びましょう。

🎯 学習目標

  • HTMLで入力フォームを作成できる
  • テキスト入力欄、ラジオボタン、チェックボックス、ボタンの使い方を理解する
  • ユーザーから情報を受け取る基本を習得する

📘 目次

  1. フォーム全体を囲む：<form>
  2. テキスト入力欄：<input type="text">
  3. ラジオボタン：<input type="radio">
  4. チェックボックス：<input type="checkbox">
  5. ボタン：<button>
  6. ラベル：<label>
  7. 今日のまとめ
  8. 演習：簡単なアンケートフォームを作ろう
  9. 理解度チェック

📚 レッスン

1. フォームの基本：<form>

フォームはユーザーからデータを収集するための重要な要素です。フォームの全ての入力要素は<form>タグで囲みます。

<form action="/submit-form" method="post">
  <!-- 入力項目など -->
</form>

フォームの属性

  • action属性：フォームのデータの送信先URL（サーバー側スクリプトのパス）
  • method属性：データの送信方法
    • get：URLにデータを付加（簡易的な検索など）
    • post：URLに表示せずにデータを送信（個人情報やログインなど）
  • ※今回は構造の学習が目的なので、これらの属性は設定しなくても動作します

2. テキスト入力欄：<input type="text">

テキスト入力欄は最も基本的なフォーム要素で、ユーザーが自由に文字を入力できるフィールドです。

<input type="text" name="username" placeholder="ユーザー名を入力" maxlength="20">

テキスト入力欄の属性

  • name属性：フォーム送信時のデータの識別子（必須）
  • placeholder属性：入力例やヒント（入力前にうっすらと表示）
  • value属性：初期値を設定
  • maxlength属性：最大入力文字数

その他のテキスト系入力タイプ

<!-- メールアドレス入力（自動バリデーション付き） -->
<input type="email" name="user_email">

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

<!-- 数値のみ入力可能 -->
<input type="number" name="quantity" min="1" max="10">

3. ラジオボタン：<input type="radio">

ラジオボタンは複数の選択肢から1つだけを選べる入力形式です。同じname属性のラジオボタンはグループとなり、グループ内で1つだけ選択可能です。

<input type="radio" name="gender" value="male" id="male"> 
<label for="male">男性</label>

<input type="radio" name="gender" value="female" id="female" checked> 
<label for="female">女性</label>

<input type="radio" name="gender" value="other" id="other"> 
<label for="other">その他</label>

ラジオボタンの属性

  • name属性：グループ化するための名前（同じnameのものがグループになる）
  • value属性：送信される値
  • checked属性：初期状態で選択済みにする
  • id属性：ラベルと紐づけるための識別子

4. チェックボックス：<input type="checkbox">

チェックボックスは複数の選択肢から複数選択可能な入力形式です。オン/オフの切り替えや、複数の選択肢を提供する場合に使用します。

<input type="checkbox" name="hobby[]" value="music" id="music" checked> 
<label for="music">音楽</label>

<input type="checkbox" name="hobby[]" value="sports" id="sports"> 
<label for="sports">スポーツ</label>

<input type="checkbox" name="hobby[]" value="reading" id="reading"> 
<label for="reading">読書</label>

チェックボックスの属性

  • name属性：フォーム送信時の識別子（複数選択の場合はhobby[]のように名前の後ろに[]をつけることが多い）
  • value属性：送信される値
  • checked属性：初期状態でチェックを入れる

※チェックボックスはラジオボタンと違い、グループ内で複数選択できます。

5. ボタン：<button>

ボタンはユーザーがアクションを実行するための要素です。主にフォームの送信やリセットに使用されます。

<!-- ボタンタグを使う場合 -->
<button type="submit">送信する</button>
<button type="reset">入力をリセット</button>
<button type="button">通常のボタン</button>

<!-- inputタグで作る場合 -->
<input type="submit" value="送信">
<input type="reset" value="リセット">
<input type="button" value="クリック">

ボタンのタイプ

  • submit：フォームを送信する（デフォルト）
  • reset：フォーム内の全入力欄をリセット
  • button：何もしない（JavaScriptでアクションを定義できる）

<button>タグは<input type="submit">より柔軟性が高く、中にテキストだけでなく画像やアイコンなども含められます。

6. ラベル：<label>

ラベルはフォーム要素に対する説明文を提供します。アクセシビリティを向上させ、クリック可能な領域を広げる重要な要素です。

<!-- 明示的な関連付け（推奨） -->
<label for="name">名前：</label>
<input type="text" id="name">

<!-- 暗黙的な関連付け -->
<label>
  メールアドレス：
  <input type="email" name="email">
</label>

ラベルのメリット

  • for属性でinputのidと対応させることでクリックしやすくする
  • スクリーンリーダーなどの支援技術でフォーム要素の目的を理解しやすくなる
  • モバイル端末でもタップしやすい領域が広がる

今日のまとめ

  • <form>タグでフォーム全体を囲む
  • <input>のtype属性で役割を決定（text / radio / checkboxなど）
  • <label>はユーザー体験を良くする

📚 リファレンス

このレッスンで学んだHTMLタグの詳細については、リファレンスページで確認できます。

✍️ 演習問題

ここでは学んだ内容を実際に使って、簡単な演習問題に挑戦してみましょう。エディタを使って実際にコードを書いてみてください。

右側のエディタにコードを入力して「実行」ボタンをクリックすると、結果をプレビューで確認できます。

1. アンケートフォームを作ろう！

以下の例を参考に、簡単なアンケートフォームを作成してみましょう。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>簡単なアンケート</title>
</head>
<body>
  <h1>簡単なアンケートフォーム</h1>
  <form>
    <p>
      <label for="name">お名前：</label><br>
      <input type="text" id="name" name="name">
    </p>

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

    <p>
      興味のある分野：<br>
      <input type="checkbox" id="it" name="interest" value="it">
      <label for="it">IT</label><br>
      <input type="checkbox" id="design" name="interest" value="design">
      <label for="design">デザイン</label><br>
      <input type="checkbox" id="business" name="interest" value="business">
      <label for="business">ビジネス</label>
    </p>

    <p>
      <button type="submit">送信</button>
      <button type="reset">リセット</button>
    </p>
  </form>
</body>
</html>

右のエディタで実際に試してみましょう！

✅ 理解度チェック

クイズに正解すると、このレッスンは「完了済み」として記録されます。

1. フォームでユーザーがテキストを入力するために使用するタグはどれですか？

2. フォーム送信ボタンを作るために使用する正しいタグはどれですか？

3. <label>タグの主な役割として正しいものはどれですか？

📘 次回予告

フォームの応用編（セレクトボックス、テキストエリアなど）を学びます！より複雑なフォーム要素を使いこなして、ユーザーから多様な情報を収集する方法を身につけましょう。

« レッスン4へ戻る レッスン6へ進む »

インラインエディタ