セレクトボックスとは、プルダウン形式、もしくは、リスト形式のフォーム部品。
概要
- select要素(<select></select>)と、option要素(<option></option>)で作成する。
- フォームデータを送信する際、select要素のname属性で指定したフォーム部品の名前と、option要素のvalue属性で指定した値が、送信される。
- select要素のsize属性で、プルダウン形式、もしくは、リスト形式を指定できる。
- select要素のmultiple属性で、複数選択も可能になる。
select要素
属性
- name=""
-
フォーム部品の名前。
- size=""
-
"1"を指定すると、プルダウン形式。
-
"2"以上を指定すると、リスト形式。
-
指定を省略した場合、プルダウン形式。
- multiple
-
複数選択が可能になる。
-
[Ctrl]キーや[Shift]キーを押しながらクリックすることで、複数を選択できる。
- disabled
-
無効化する。
-
これを指定した選択肢は、選択できなくなる。
-
JavaScript と組み合わせて使用することが多い。
option要素
select要素(<select></select>)内に配置する。
属性
- value=""
-
送信される値。
-
指定を省略した場合、option要素内のテキストを送信する。
- label=""
-
表示するテキスト。
-
指定を省略した場合、option要素内のテキストを表示する。
-
2011年4月現在、対応済みのブラウザは少ない。未対応ブラウザの場合、option要素内のテキストを表示する。
- selected
-
選択された状態にする。
- disabled
-
無効化する。
-
これを指定した選択肢は、選択できなくなる。
-
JavaScript と組み合わせて使用することが多い。
セレクトボックスの使用例
プルダウン形式
基本例
ソース
|
1 2 3 4 5 6 7
| <select name="music">
<option value="pop">ポップ</option>
<option value="rock">ロック</option>
<option value="techno">テクノ</option>
<option value="jazz">ジャズ</option>
<option value="classic">クラシック</option>
</select> |
|
表示
|
|
option要素の属性使用例
ソース
|
1 2 3 4 5 6 7
| <select name="music">
<option value="pop">ポップ</option>
<option>ロック</option>
<option value="techno" label="テクノ"></option>
<option value="jazz" selected>ジャズ</option>
<option value="classic" disabled>クラシック</option>
</select> |
|
表示
|
|
リスト形式
基本例
ソース
|
1 2 3 4 5 6 7
| <select name="music" size="3">
<option value="pop">ポップ</option>
<option value="rock">ロック</option>
<option value="techno">テクノ</option>
<option value="jazz">ジャズ</option>
<option value="classic">クラシック</option>
</select> |
|
表示
|
|
複数選択可能にした例
ソース
|
1 2 3 4 5 6 7
| <select name="music" size="3" multiple>
<option value="pop">ポップ</option>
<option value="rock">ロック</option>
<option value="techno">テクノ</option>
<option value="jazz">ジャズ</option>
<option value="classic">クラシック</option>
</select> |
|
表示
|
|
option要素の属性使用例
ソース
|
1 2 3 4 5 6 7
| <select name="music" size="3" multiple>
<option value="pop" selected>ポップ</option>
<option>ロック</option>
<option value="techno" label="テクノ"></option>
<option value="jazz" selected>ジャズ</option>
<option value="classic" disabled>クラシック</option>
</select> |
|
表示
|
|