ここまでは「文字を打ち込む」入力欄でした。でもフォームには、もうひとつの形があります。用意された選択肢から選ぶ入力です。アンケートの「あてはまるものを選んでください」——あれの作り方を覚えましょう。
いくつでも選べる：チェックボックス
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>nameのグループだからです。ドロップダウンから選ぶ：セレクト
選択肢がたくさんあるときは、<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>| 書くもの | 効果 |
|---|---|
checked | チェックボックス・ラジオボタンを最初からONにする |
selected | そのoptionを最初から選ばれた状態にする |
「よく選ばれる項目をあらかじめ選んでおく」「アンケートの初期値を用意しておく」といった場面で使います。
さわってたしかめよう
3種類ぜんぶ、実物を置いておきます。実際に選んでみましょう。
nameのグループだからです。このレッスンのまとめ
- チェックボックス（
type="checkbox"）は複数選べる - ラジオボタン（
type="radio"）はひとつだけ——仲間は同じnameにする - セレクト（
<select>と<option>）はドロップダウンから選ぶ
打つ入力と選ぶ入力——部品がぜんぶそろいました。