💡 この記事でわかること
- select要素とは何か
- select要素とoption要素の基本的な書き方
- よく使う属性(selected・multiple・disabled等)の使い方
- optgroupによる選択肢のグループ化
- 初心者がつまずきやすいポイント
1. select要素とは？
select要素とは、
👉 複数の選択肢の中から1つ(または複数)を選ばせる「プルダウンメニュー」を作るタグです。
都道府県の選択欄や、お問い合わせフォームの「ご用件」の選択欄など、選択肢の数が多い項目でよく使われます。
💡 選択肢がradio(ラジオボタン)のように画面に全部並ぶと場所を取ってしまう場合や、選択肢の数が多い場合に、select要素を使うとコンパクトにまとめられます。
2. select要素の基本的な書き方
select要素は単体では使わず、中に選択肢となるoption要素を入れ子にして使います。
<select name="prefecture">
<option value="tokyo">東京都</option>
<option value="osaka">大阪府</option>
<option value="fukuoka">福岡県</option>
</select>それぞれのタグの役割は次のとおりです。
<select>:プルダウンメニュー全体を囲むタグ。name属性で送信時の項目名を指定する<option>:個々の選択肢を表すタグ。value属性が実際に送信される値、タグの中身が画面に表示されるテキスト
💡 select要素にもinput要素と同じくname属性が必要です。name属性がないと、選んだ値がフォーム送信時に送られません。
3. よく使う属性
selected:最初から選択させておく
option要素にselected属性を付けると、そのページが表示された時点でその選択肢が選ばれた状態になります。
<select name="prefecture">
<option value="tokyo" selected>東京都</option>
<option value="osaka">大阪府</option>
</select>multiple:複数選択を許可する
select要素にmultiple属性を付けると、Ctrlキー(Macは⌘キー)を押しながらクリックすることで複数の選択肢を同時に選べるようになります。
<select name="hobby" multiple>
<option value="reading">読書</option>
<option value="sports">スポーツ</option>
<option value="music">音楽</option>
</select>disabled:選択できないようにする
select要素全体、またはoption要素1つ単位でdisabled属性を付けると、その項目をグレーアウトさせて選べないようにできます。
<option value="hokkaido" disabled>北海道(現在受付停止中)</option>size:表示行数を指定する
size属性で数値を指定すると、プルダウン形式ではなく、指定した行数分の選択肢を常に表示するリストボックス形式に変わります。
<select name="hobby" size="3">
<option value="reading">読書</option>
<option value="sports">スポーツ</option>
<option value="music">音楽</option>
</select>4. optgroupで選択肢をグループ化する
選択肢の数が多いときは、optgroup要素を使ってグループごとに見出しを付けると、ユーザーが選びやすくなります。
<select name="prefecture">
<optgroup label="関東">
<option value="tokyo">東京都</option>
<option value="kanagawa">神奈川県</option>
</optgroup>
<optgroup label="関西">
<option value="osaka">大阪府</option>
<option value="kyoto">京都府</option>
</optgroup>
</select>👉 optgroupのlabel属性で指定した文字はグループの見出しとして表示されるだけで、選択肢そのものにはなりません。
5. 初心者がつまずきやすいポイント
valueと表示テキストを混同する
option要素のvalue属性(送信される値)と、タグに挟まれたテキスト(画面に表示される文字)は別物です。「画面には日本語、送信される値は英語のID」というように使い分けるのが基本です。
selectedを複数のoptionに付けてしまう
multiple属性がない通常のselectでは、selectedは1つのoptionにだけ付けます。複数に付けてしまうと、ブラウザによっては最後に書かれたものだけが有効になるなど、意図しない動きになります。
select自体にvalue属性を書いてしまう
value属性はoption要素に指定するものです。select要素自体には書きません。初期選択を変えたい場合は、対象のoptionにselected属性を付けます。
まとめ
この記事では、HTMLのselect要素・option要素を使ったプルダウンメニューの作り方について解説しました。
- select要素の中にoption要素を並べて選択肢を作る
- selected・multiple・disabled・sizeなどの属性で挙動を細かく調整できる
- optgroupを使うと選択肢をグループ分けして見やすくできる
- valueと表示テキストの違い、selectedの付け方には注意が必要
実際にフォームを作りながら、selectとoptionの組み合わせに慣れていきましょう。