選ぶ入力（チェックボックス・ラジオ・セレクト）

ここまでは「文字を打ち込む」入力欄でした。でもフォームには、もうひとつの形があります。用意された選択肢から選ぶ入力です。アンケートの「あてはまるものを選んでください」のような、あれの作り方を覚えましょう。

いくつでも選べる：チェックボックス

type="checkbox"は、あてはまるものを何個でも選べる四角いボックスです。

<label><input type="checkbox"> りんご</label>
<label><input type="checkbox"> みかん</label>
<label><input type="checkbox"> ぶどう</label>

<label>で囲むと、文字をクリックしてもチェックが入るようになります（前に習ったラベルの効果ですね）。

ひとつだけ選ぶ：ラジオボタン

type="radio"は、選択肢の中からひとつだけを選ぶ丸いボタン。「はい / いいえ」のように、両立しない選択に使います。

<label><input type="radio" name="plan"> 無料プラン</label>
<label><input type="radio" name="plan"> 有料プラン</label>

ドロップダウンから選ぶ：セレクト

選択肢がたくさんあるときは、<select>のドロップダウンがすっきりします。中に<option>（選択肢）を並べます。

<select>
  <option>東京</option>
  <option>大阪</option>
  <option>福岡</option>
</select>

<select>が箱、<option>がひとつひとつの選択肢。クリックすると、にゅっとリストが開きます。

あらかじめ選んでおく（checked・selected）

ページを開いた時点で、すでに選ばれた状態にしておくこともできます。チェックボックスとラジオボタンはchecked、セレクトは選ばせたい<option>にselectedを書き足すだけです。

<label><input type="checkbox" checked> りんご</label>

<label><input type="radio" name="plan" checked> 無料プラン</label>
<label><input type="radio" name="plan"> 有料プラン</label>

<select>
  <option>東京</option>
  <option selected>大阪</option>
  <option>福岡</option>
</select>

「よく選ばれる項目をあらかじめ選んでおく」「アンケートの初期値を用意しておく」といった場面で使います。

さわってたしかめよう

3種類ぜんぶ、実物を置いておきます。実際に選んでみましょう。

このレッスンのまとめ

1. チェックボックス（type="checkbox"）は複数選べる
2. ラジオボタン（type="radio"）はひとつだけ。仲間は同じnameにする
3. セレクト（<select>と<option>）はドロップダウンから選ぶ