HTMLのチェックボックス・ラジオボタン・セレクト（checkbox・radio・select）

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

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

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> がひとつひとつの選択肢。クリックすると、にゅっとリストが開きます。

打つ入力と選ぶ入力——部品がぜんぶそろいました。