ITコラム

ITコラム

2017.02.23

HTML 【フォーム】８～セレクトリスト

今回は、フォームで使われる部品の中で、セレクトリストの作り方を紹介します。

フォームについては、こちらのページもご参照下さい。

１．select 要素、option 要素、optgroup 要素

セレクトリストは、select 要素で作ります。
そして、セレクトリストで表示される選択肢は、option 要素で設定します。
また、選択肢をグループ分けしたい時に使用する optgroup 要素というものもあります。

select要素は、size属性の値によって表示されるリストの形態が変わります。

size属性の値が 1 の場合は、プルダウンメニューになります。
（下記がソースコードです。）

<select size="1">
  <option value="">プルダウンメニュー</option>
  <option value="1">プルダウン１</option>
  <option value="2">プルダウン２</option>
  <option value="3">プルダウン３</option>
</select>

　
size属性の値が 2 以上の場合は、リストボックスになります。
（下記がソースコードです。）

<select size="2">
  <option value="">リストボックス</option>
  <option value="1">リスト１</option>
  <option value="2">リスト２</option>
  <option value="3">リスト３</option>
</select>

　
size属性は、表示する行数を指定する属性で、デフォルト値が 1 です。
ですので、size属性を指定しない場合は、セレクトリストはプルダウンメニューがデフォルトとなります。

ただ、multiple 属性を指定すると size 属性値のデフォルト値は 4 となり、セレクトリストの形態はリストボックスとなります。
この場合、size 属性値は変更できますが、複数選択を可能にするという性質から表示形態はリストボックスのみとなります。

multiple 属性が指定されたセレクトリストで選択肢を複数選ぶ場合は、ctrl キー（ Mac では command キー）を押しながら選択します。

各要素には、それぞれ以下の属性があります。

select 要素の属性

name

select 要素に固有の名前を付ける

size

リストボックスの行数

multiple

複数選択を可能にする

required

選択必須項目にする

disabled

リスト全体を使用不可の状態にする

form

親の form 要素の ID 名を呼び出して関連付ける

autofocus

ロード後フォーカスを当てる

name
select 要素に固有の名前を付ける
size
リストボックスの行数
multiple
複数選択を可能にする
required
選択必須項目にする
disabled
リスト全体を使用不可の状態にする
form
親の form 要素の ID 名を呼び出して関連付ける
autofocus
ロード後フォーカスを当てる

option 要素の属性

value

プログラム側へ渡すデータ値
（ select 要素の name 属性値とセットで送信）

selected

最初から選択された状態にする

disabled

選択肢を使用不可の状態にする

label

選択肢の表示テキスト

value
プログラム側へ渡すデータ値（ select 要素の name 属性値とセットで送信）
selected
最初から選択された状態にする
disabled
選択肢を使用不可の状態にする
label
選択肢の表示テキスト

optgroup 要素の属性

label

選択肢グループの表示テキスト

disabled

選択肢グループを使用不可の状態にする

label
選択肢グループの表示テキスト
disabled
選択肢グループを使用不可の状態にする

▲目次へ戻る

２．プルダウンメニュー

select 要素に name 属性だけを指定

select 要素に name 属性だけを指定すると、次のようなプルダウンメニューになります。

上のサンプルのソースコードは次の通りです。

<select name="select1">
　<option value="">好きなフルーツ</option>
　<option value="1">いちご</option>
　<option value="2">もも</option>
　<option value="3">ぶどう</option>
　<option value="4">さくらんぼ</option>
</select>

option 要素の value 属性の値は、ユーザが画面から選択した値として select 要素の name 属性の値と共にプログラム側へ送られます。
ですので、select 要素の name 属性は必ず指定します。

select要素にsize属性を指定していませんが、デフォルト値が 1 なのでプルダウンメニューになっています。

option要素で選択肢を作ります。
option要素の１番目は、デフォルト表示されるテキストなので、上記のように選択肢の内容を表示させたり「選択して下さい」のようなメッセージを表示させたりするために使用することが多いです。
そのような場合は value 属性の値は不要です。
　

optgroup 要素でグループ分け

optgroup 要素を使って、選択肢をグループ分けしてみます。

上のサンプルのソースコードは次の通りです。

<select name="select2">
　<option value="">カテゴリ</option>
　<optgroup label="アウター">
　　<option value="コート">コート</option>
　　<option value="ジャケット">ジャケット</option>
　　<option value="カーディガン">カーディガン</option>
　</optgroup>
　　<optgroup label="ボトムス">
　　<option value="ロングパンツ">ロングパンツ</option> 
　　<option value="ショートパンツ">ショートパンツ</option> 
　　<option value="スカート">スカート</option> 
　</optgroup>
</select>

選択肢のグループを<optgroup>～</optgroup>で囲み、label 属性でグループ名を指定しています。
optgroup 要素には label 属性の指定が必須です。
label 属性を指定しないと、上のようなリスト表示になりません。

▲目次へ戻る

３．リストボックス

select 要素の size 属性を 2 以上に指定

select要素で、size 属性を２以上に指定するとリストボックスになります。

上のサンプルのソースコードは次の通りです。

<select  name="select3" size="3">
　<option value="1">リスト１</option>
　<option value="2">リスト２</option>
　<option value="3">リスト３</option>
　<option value="4">リスト４</option>
　<option value="5">リスト５</option>
</select>

select 要素の multiple 属性を指定

select 要素で multiple 属性を指定しただけでもリストボックスになります。

上のサンプルのソースコードは次の通りです。

<select  name="select4" multiple>
　<option value="">ctrl キーで複数選択できます</option>
　<option value="1">複数選択１</option>
　<option value="2">複数選択２</option>
　<option value="3">複数選択３</option>
　<option value="4">複数選択４</option>
　<option value="5">複数選択５</option>
</select>

multiple 属性を指定すると ctrl キー（ Mac では command キー）を押しながら複数の選択肢を選ぶことができるようになります。
そして、size 属性のデフォルト値は 4 に変わり、表示の形態はリストボックスとなります。

▲目次へ戻る