LTech

レッスン6：HTMLフォーム応用編 ─ セレクトボックスとテキストエリアを使いこなそう

フォームの応用的な要素を学び、よりリッチなフォームを作成しましょう。

🎯 学習目標

  • セレクトボックスでプルダウンメニューを作成できる
  • テキストエリアで長文の入力欄を作成できる
  • フォームをより柔軟に構築できるようになる

📘 目次

  1. セレクトボックス（<select>、<option>）
  2. テキストエリア（<textarea>）
  3. 入力の補助：placeholder、required、disabled
  4. 今日のまとめ
  5. 演習：お問い合わせフォームを作ろう
  6. 理解度チェック
  7. 次回予告

📚 レッスン

1. セレクトボックス（<select>, <option>）

セレクトボックス（プルダウンメニュー）は、複数の選択肢からひとつを選ばせたい場合に便利なUIです。スペースを取らずに多くの選択肢を提供できます。

<label for="pref">お住まいの都道府県：</label>
<select id="pref" name="prefecture">
  <option value="tokyo">東京都</option>
  <option value="osaka">大阪府</option>
  <option value="hokkaido">北海道</option>
</select>

セレクトボックスの基本

  • <select> で選択欄全体を囲む
  • <option> でそれぞれの選択肢を定義
  • value属性で送信時の値を指定（サーバーに送られるデータ）
  • <option>の中身のテキストはユーザーに表示される内容

追加オプションと応用例

<select name="fruits" multiple size="3">
  <option value="apple">りんご</option>
  <option value="orange" selected>オレンジ</option>
  <option value="banana" disabled>バナナ</option>
</select>
  • multiple属性：複数選択を可能にする（Ctrlキーを押しながらクリック）
  • size属性：一度に表示する選択肢の数
  • selected属性：初期状態で選択されている項目を指定
  • disabled属性：選択できない項目を指定

オプショングループ

選択肢が多い場合は<optgroup>タグでグループ化できます：

<select name="area">
  <optgroup label="関東">
    <option value="tokyo">東京都</option>
    <option value="kanagawa">神奈川県</option>
  </optgroup>
  <optgroup label="関西">
    <option value="osaka">大阪府</option>
    <option value="kyoto">京都府</option>
  </optgroup>
</select>

2. テキストエリア（<textarea>）

テキストエリアは複数行のテキスト入力が可能なフォーム要素です。お問い合わせ内容や、コメントなどの長文入力に適しています。

<label for="message">お問い合わせ内容：</label><br>
<textarea id="message" name="message" rows="4" cols="40"></textarea>

テキストエリアの基本

  • 複数行のテキスト入力が可能
  • rows属性で表示する行数を指定
  • cols属性で1行あたりの文字数（幅）を指定
  • 開始タグと終了タグの間に初期テキストを配置できる

テキストエリアの応用

<textarea name="bio" rows="6" cols="50" 
  placeholder="自己紹介を入力してください" 
  maxlength="500" 
  >ここにデフォルトのテキストを入れられます</textarea>

その他の属性

  • maxlength属性：最大文字数を制限
  • minlength属性：最低入力文字数を設定
  • readonly属性：読み取り専用に設定

3. 入力補助オプション

フォーム要素の入力をより使いやすくするための補助オプションを紹介します。これらのオプションはユーザビリティの向上に役立ちます。

placeholder（入力例・ヒントを表示）

入力欄に薄く表示される例やヒントです。ユーザーが何を入力すべきかわかりやすくします。

<input type="text" placeholder="例：山田 太郎">

入力が始まると自動的に消え、入力欄が空になると再び表示されます。

required（必須入力）

入力必須のフィールドを指定します。この属性がある場合、値が空のままフォームを送信しようとするとブラウザがエラーを表示します。

<input type="email" required>

readonly（読み取り専用）

ユーザーが閲覧のみ可能で編集はできない状態にします。フォームで送信されるデータに含まれます。

<input type="text" value="変更できない値" readonly>

disabled（無効化）

入力欄を完全に無効化します。見た目もグレーアウトし、フォーム送信時にこの要素のデータは送信されません。

<input type="text" value="編集不可" disabled>

autofocus（自動フォーカス）

ページ読み込み時に自動的にフォーカスを当てます。通常はフォームの最初の入力欄に設定します。

<input type="text" autofocus>

今日のまとめ

  • <select> / <option> で選択式メニュー
  • <textarea> で長文入力欄
  • placeholder、required などで入力を補助できる

📚 リファレンス

このレッスンで学んだ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" placeholder="例：山田 太郎" required>
    </p>

    <p>
      <label for="email">メールアドレス：</label><br>
      <input type="email" id="email" name="email" placeholder="例：example@example.com" required>
    </p>

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

    <p>
      <label for="message">お問い合わせ内容：</label><br>
      <textarea id="message" name="message" rows="5" cols="40" placeholder="ご用件をご記入ください"></textarea>
    </p>

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

✅ 理解度チェック

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

1. ユーザーに選択肢から1つを選ばせるために使うHTMLタグはどれですか？

2. 複数行の自由なテキスト入力欄を作るには、どのタグを使用しますか？

3. 以下のコードの説明として正しいものはどれですか？

<select>
  <option value="apple">りんご</option>
  <option value="banana">バナナ</option>
</select>

📘 次回予告

HTMLの構造を整える：セクション分け、ヘッダー、フッター、ナビゲーションの使い方（<header>, <section>, <nav>, <footer>） を学びます！

« レッスン5へ戻る レッスン7へ進む »

インラインエディタ