HTML要素 ・ フォーム
<select>
プルダウンの選択肢
あらかじめ用意した選択肢から選ばせるプルダウンメニューです。選択肢は option で書きます。
01
サンプルコード
HTML
1<label for="size">サイズ</label>
2<select id="size" name="size">
3 <option value="">選択してください</option>
4 <option value="S">S</option>
5 <option value="M" selected>M</option>
6 <option value="L">L</option>
7</select>
CSS
1select {
2 padding: 6px 10px;
3 border: 1px solid #bbb;
4 border-radius: 4px;
5 font: inherit;
6}
02
実行結果
ブラウザでの表示
03
解説
select はプルダウン形式の選択欄です。中に option を並べ、選ばれた option の value が送信されます。
selected 属性を付けた option が最初から選ばれた状態になります。
選択肢が多いときは optgroup でグループに分けると選びやすくなります。
multiple 属性を付けると、Ctrl キー（Mac は ⌘ キー）を押しながら複数の項目を選べるセレクトボックスになります。PHP などで受け取る場合は、name 属性の値の最後に [] を付けておくと、選んだ項目がすべて受け渡されます（付けないと最後の1つしか受け取れません）。
04
応用例・注意点
主な属性
| 属性 | 説明 |
|---|---|
multiple | 複数選択を可能にする |
required | 選択を必須にする |
option の value | 送信される値 |
option の selected | 初期状態で選択する |
optgroup の label | 選択肢のグループ名 |
選択肢をグループに分ける
optgroup の label はグループ名として表示され、選択はできません。
HTML
1<select name="drink">
2 <optgroup label="コーヒー">
3 <option>ブレンド</option>
4 <option>カフェラテ</option>
5 </optgroup>
6 <optgroup label="紅茶">
7 <option>ダージリン</option>
8 </optgroup>
9</select>
複数選択できるセレクトボックス
multiple と name の [] をセットで付けます。size で一度に見える行数を指定できます。
HTML
1<select name="acthouse[]" multiple size="3">
2 <option value="html" selected>HTML</option>
3 <option value="css">CSS</option>
4 <option value="js">JS</option>
5</select>
注意点
- 01選択肢が2〜3個しかない場合は、ラジオボタンのほうが選びやすいことがあります。
- 02プルダウン部分の見た目はOSやブラウザによって異なり、CSSで変えられる範囲が限られます。