【6日でできるHTML＆CSS入門】その他のタグの利用

　Webフォームはユーザーからさまざまな情報を受け取るための大切な仕組みです。基本的なテキスト入力欄やラジオボタン以外にも、選択肢をプルダウンから選ばせたり、複数選択できるチェックボックスを利用したり、長文入力に便利なテキストエリアや多様なボタンを設置することができます。
　ここでは、こうした「その他のフォームタグ」の使い方や特徴を、実際のHTMLサンプルとともに解説します。

１．さまざまなコントロールの利用

1.1. 入力用の追加タグ

　フォームでは、状況に応じて複数のコントロールを組み合わせます。ここでは、セレクトボックス（プルダウンメニュー）、チェックボックス、複数行テキスト入力などを使う例を紹介します。

ファイル名： lesson43_1.html

<!DOCTYPE html>
<html>
<head>
  <title>イベント参加申込フォーム</title>
  <meta charset="UTF-8">
  <style>
    body { font-family: sans-serif; padding: 30px; }
    form { width: 370px; margin: 0 auto; background: #f5f5f5; padding: 18px; border-radius: 7px; }
    .form-group { margin-bottom: 13px; }
    label { display: block; font-weight: bold; margin-bottom: 3px; }
    input[type="text"], textarea, select { width: 100%; padding: 6px; box-sizing: border-box; }
    .checkbox-group label, .radio-group label { display: inline-block; margin-right: 14px; font-weight: normal; }
    button { padding: 7px 20px; border: none; border-radius: 4px; background: #489bcf; color: #fff; margin-right: 8px; }
    button[type="reset"] { background: #aaa; }
  </style>
</head>
<body>
  <h1>イベント参加申込フォーム</h1>
  <form method="GET" action="sample-other-tags.html">
    <div class="form-group">
      <label for="name">氏名</label>
      <input type="text" id="name" name="name" placeholder="例：田中一郎">
    </div>
    <div class="form-group">
      <label for="age">年齢</label>
      <input type="text" id="age" name="age" placeholder="例：28">
    </div>
    <div class="form-group radio-group">
      <label>参加日</label>
      <label><input type="radio" name="date" value="初日" checked>初日</label>
      <label><input type="radio" name="date" value="2日目">2日目</label>
      <label><input type="radio" name="date" value="両日">両日</label>
    </div>
    <div class="form-group">
      <label for="plan">希望するプラン</label>
      <select name="plan" id="plan">
        <option value="一般">一般</option>
        <option value="学生">学生</option>
        <option value="小学生">小学生</option>
        <option value="未就学児" selected>未就学児</option>
      </select>
    </div>
    <div class="form-group checkbox-group">
      <label>参加希望イベント（複数選択可）</label>
      <label><input type="checkbox" name="event" value="ワークショップ">ワークショップ</label>
      <label><input type="checkbox" name="event" value="講演会">講演会</label>
      <label><input type="checkbox" name="event" value="体験コーナー">体験コーナー</label>
      <label><input type="checkbox" name="event" value="懇親会">懇親会</label>
    </div>
    <div class="form-group">
      <label for="message">ご要望・ご質問</label>
      <textarea name="message" id="message" rows="4" placeholder="ご自由にご記入ください"></textarea>
    </div>
    <button type="submit">送信</button>
    <button type="reset">リセット</button>
  </form>
</body>
</html>

表示結果

氏名・年齢（テキストボックス）
参加日（ラジオボタン：初日／2日目／両日）
希望するプラン（セレクトボックス：一般／学生／小学生／未就学児）
参加希望イベント（チェックボックス複数選択）
ご要望・ご質問（テキストエリア）
送信・リセットボタン

1.2. 新しいタグ・属性の使い方と特徴

selectタグ・optionタグ

セレクトボックスは<select>と<option>で作ります。
1つだけ選択でき、selected属性を指定すれば初期値に設定できます。

<select name="plan" id="plan">
  <option value="一般">一般</option>
  <option value="学生">学生</option>
  <option value="小学生">小学生</option>
  <option value="未就学児" selected>未就学児</option>
</select>

チェックボックス（checkbox）

複数の選択肢からいくつでも選べる場合は<input type="checkbox">を使います。
各チェックボックスは同じnameでもOKですが、値（value）を付与すると判別が楽です。

<label><input type="checkbox" name="event" value="講演会">講演会</label>

テキストエリア（textarea）

複数行の文章入力が必要な場合は<textarea>を使います。
rows属性で縦の行数、placeholderで案内文を設定可能。

<textarea name="message" id="message" rows="4" placeholder="ご自由にご記入ください"></textarea>

ボタン（button）

<button>タグは、type="submit"やtype="reset"を付与して用途ごとに使います。
テキストだけでなく、画像やアイコンを配置するなど拡張も可能です。

<button type="submit">送信</button>
<button type="reset">リセット</button>

２．使用したタグと主な属性の一覧

タグ・属性	説明・使い方例
<input type="text">	1行のテキスト入力欄。`placeholder`で入力例を表示
<input type="radio">	複数から1つだけ選択するためのボタン。`checked`で初期選択
<input type="checkbox">	複数から好きなだけ選択できるボタン。`value`で選択内容を判別
<select> / <option>	プルダウンメニューを作る。`selected`で初期選択
<textarea>	複数行の文章入力欄。`rows`で行数を指定
<button>	汎用ボタン。`type="submit"`で送信、`type="reset"`でリセット
name	送信時に値を識別する属性（必須）
placeholder	未入力時の案内テキスト
checked / selected	初期状態で選択済みにする

まとめ

　フォームにはテキスト入力欄やラジオボタンだけでなく、セレクトボックス・チェックボックス・テキストエリア・各種ボタンなど多彩なコントロールがあり、目的に応じて適切なものを選んで使うことが重要です。
　各タグの特徴や属性を理解して、ユーザーが入力しやすく管理しやすいフォームを設計しましょう。サンプルHTMLをぜひコピー＆編集しながら実際に試してみてください。