[51] セレクトメニューを作ろう（select・option・optgroup要素）

<select>要素で、ユーザにリストから選択してもらう「セレクトメニュー」を作ります。

メニューのリスト（選択肢）には<option>要素を使うので<select>と<option>は必ずセットで使います。また、<optgroup>要素は、リストをグループ分けしたいときに使います。
クリックして確認 option option option option option option

この<select>要素のいちばんの特徴は、size属性の値によってカタチが変わること！

size属性の値が「1」なら、プルダウンメニューに プルダウンメニュー 選択肢1 選択肢2 選択肢3 選択肢4 選択肢5

size属性の値が「2以上」で、リストボックス リストボックス リストボックス1 リストボックス2 リストボックス3 リストボックス4 リストボックス5 になります。

size属性は、表示する行数を指定する属性で、デフォルトが「1」です。
なので、size属性を指定しなければ <select>は「プルダウンメニュー」になります。

また、multiple属性を使っても「リストボックス」になります。
これは、multiple属性を指定すると自動的にsize属性が「4」になるから。
もちろん 4 以外の行数も指定できます。
ただし、multiple属性を指定した場合は、size="1" にしても「リストボックス」になります。
multiple属性は、複数選択を可能にする属性です。
Winでは「ctrlキー」、Macでは「コマンドキー」を押しながら選択すると複数選択できます。
選択肢1 選択肢2 選択肢3 選択肢4 選択肢5

使用する要素	<select> 〜 </select> <option> 〜 </option> <optgroup> 〜 </optgroup>

selectの属性 （一覧はこちら）	name	：<select>に固有の名前をつける
	size	：リストボックスの行数
	multiple	：リストボックスの複数選択
	required	：必須項目にする
	disabled	：リスト全体を使用不可の状態にする
	form	：親の<form>のID名を呼び出して関連づける
	autofocus	：ロード後、自動的にフォーカスする

optionの属性 （一覧はこちら）	value	：送信値。<select>のname属性値とセットで送る
	selected	：特定の選択肢を最初から選ばれた状態にする
	disabled	：特定の選択肢を使用不可の状態にする
	label	：選択肢の表示テキスト

optgroupの属性 （一覧はこちら）	label	：選択肢のグループの名前を表示する
	disabled	：選択肢のグループを使用不可の状態にする

<select>でプルダウンメニューを作ろう

冒頭部分でだいたいの使い方を紹介していますが、サンプルソースを見ていきましょう。

●サンプル1
まずは、<section>要素に name属性だけを指定したサンプル。
name属性の値は<option>要素の value属性の値ととセットで送信されるので、必ず指定しましょう。無いと意味不明になるよ。
（しかし、value属性のほうは無くてもOKなんです。↓ サンプル6で詳細 ）

選択してください 選択肢1 選択肢2 選択肢3 選択肢4 選択肢5

HTMLはこちら ↓

<select name="sample1">
  <option value="">選択してください</option>
  <option value="1">選択肢1</option>
  <option value="2">選択肢2</option>
  <option value="3">選択肢3</option>
  <option value="4">選択肢4</option>
  <option value="5">選択肢5</option>
</select>

<select>に size属性は指定せず、デフォルトが「1」なので「プルダウンメニュー」になっています。
<option>要素で選択肢を作っているのがわかりますね。
<option>の1行目ですが、value属性に何も指定していません。
これは、最初にユーザの目に触れる行なので、ユーザへのメッセージ用に使っています。そのため送信する必要がないので value属性の値を設定していないのです。

●サンプル2
次に、<optgroup>要素を使って、リストをグループ分けしてみましょう。

選択してください 北海道 青森県 岩手県 宮城県 秋田県 山形県 福島県 茨城県 栃木県 群馬県 ごめん！以下省略

HTMLはこちら ↓

<select name="sample2">
  <option value="">選択してください</option>
  <optgroup label="北海道・東北">
  <option value="北海道">北海道</option>
   〜略〜
  </optgroup>
  <optgroup label="関東">
  <option value="茨城県">茨城県</option> 
  〜略〜
  </optgroup>
</select>

グループを<optgroup>〜</optgroup>で囲んで分けているのがわかりますね。
グループ名を label属性でつけています。
<optgroup>要素には label属性が必須です。
label属性が無ければ何も起こりません。
必ず「<optgroup label="グループ名のテキスト">〜</optgroup>」のカタチで使いましょう。

<select>でリストボックスを作ろう

●サンプル3
<select>要素で size属性を「2」以上に指定すると「リストボックス」になります。

選択肢1 選択肢2 選択肢3 選択肢4 選択肢5

HTMLはこちら ↓ 　size属性を加えただけです。

<select name="sample3" size="3">
  <option value="1">選択肢1</option>
  <option value="2">選択肢2</option>
  <option value="3">選択肢3</option>
  <option value="4">選択肢4</option>
  <option value="5">選択肢5</option>
</select>

●サンプル4
<select>要素で multiple属性を加えただけでも「リストボックス」になります。

ctrl(Win), command(Mac)で複数選択 選択肢1 選択肢2 選択肢3 選択肢4 選択肢5

HTMLはこちら ↓ 　multiple属性を加えただけです。

<select name="sample4" multiple>
  <option value="">ctrl(Win), command(Mac)で複数選択</option>
  <option value="1">選択肢1</option>
  <option value="2">選択肢2</option>
  <option value="3">選択肢3</option>
  <option value="4">選択肢4</option>
  <option value="5">選択肢5</option>
</select>

multiple属性を加えると、自動的に「size="4"」になるので、リストボックスになります。
multiple属性を使うと複数選択ができるようになります。Winでは「ctrlキー」、Macでは「コマンドキー」を押しながら選択すると複数選択できます。
これはユーザにわかるように表示する必要がありますね。

<option>要素の selected・value・label属性

<option>要素（各選択肢）で使う属性のうち、特徴のあるものをピックアップしました。

●サンプル5
まずは、selected属性。これは最初から選ばれた選択肢を表示する属性です。
サンプルでは3番目のリスト項目（選択肢3）に selected属性を指定しています。

選択肢1 選択肢2 選択肢3 選択肢4 選択肢5

HTMLはこちら ↓

<select name="sample5">
  <option value="1">選択肢1</option>
  <option value="2">選択肢2</option>
  <option value="3" selected>選択肢3</option>
  <option value="4">選択肢4</option>
  <option value="5">選択肢5</option>
</select>

multiple属性を加えた場合は、最初から選ばれた選択肢を複数指定できます。

選択肢1 選択肢2 選択肢3 選択肢4 選択肢5

HTMLはこちら ↓

<select name="sample5-2" multiple>
  <option value="1" selected>選択肢1</option>
  <option value="2">選択肢2</option>
  <option value="3" selected>選択肢3</option>
  <option value="4">選択肢4</option>
  <option value="5">選択肢5</option>
</select>

●サンプル6
次は、value属性。これ、無くてもOKなんですよ。
value属性がない場合は、<option>〜</option>内のテキストがnameとセットで送られるんです。

例えば下のサンプルで「ボンゴレビアンコ」を選んで「送信」した場合、サンプルの name属性の値「sample6」と結びついて「sample6=ボンゴレビアンコ」といったカタチで送信されます。

本日のおすすめパスタ ペスカトーレ ボンゴレビアンコ ボンゴレロッソ カルボナーラ

HTMLはこちら ↓　value属性を使っていません。

<select name="sample6">
  <option selected>本日のおすすめパスタ</option>
  <option>ペスカトーレ</option>
  <option>ボンゴレビアンコ</option>
  <option>ボンゴレロッソ</option>
  <option>カルボナーラ</option>
</select>

<option>の1行目をユーザへのメッセージに使う場合（上のサンプルだと「本日のおすすめパスタ」）は、value属性が無いと、ユーザーが何も選ばずに送信ボタンを押すと、この文言「本日のおすすめパスタ」が送信されちゃいます。
リストの中にはメッセージ的な文言を入れず、選択肢だけにしたほうがイイね。

●サンプル7
続いて、label属性。label属性って<optgroup>だけかと思ったら、<option>要素にも使えるのだそうです。（★ただし、Firefoxなど対応していないブラウザもあります）
label属性で指定したテキストが表示されます。Chrome、Opera で見てください。

IE7 IE8 IE9 IE10

HTMLはこちら ↓

<select name="sample7">
  <option label="Internet Explorer 7">IE7</option>
  <option label="Internet Explorer 8">IE8</option>
  <option label="Internet Explorer 9">IE9</option>
  <option label="Internet Explorer 10">IE10</option>
</select>

対応ブラウザでは、label属性のテキストがメニューで表示され、送信には<option></option>で囲まれたテキストが使われます。
未対応ブラウザもあるし、あんまり使わないかも。ま、豆知識として。

disabled属性は選択不可にします

disabled属性は、選択不可にする属性で、、<select><option><optgroup>全部に使えます。
<select>に使えばセレクトメニュー全体が、<option>に使えば特定の選択肢が、<optgroup>に使えば選択肢のグループが、選択不可になります。

●サンプル8
サンプルは左から、<select><option><optgroup>にdisabled属性を使った例です。

選択肢1 選択肢2 選択肢3 選択肢4 選択肢1 選択肢2 選択肢3 選択肢4 選択肢1 選択肢2 選択肢3 選択肢4

HTMLはこちら ↓

<select name="sample8-1" disabled>
  <option>選択肢1</option>
  <option>選択肢2</option>
  <option>選択肢3</option>
  <option>選択肢4</option>
</select>
<select name="sample8-2">
  <option>選択肢1</option>
  <option disabled>選択肢2</option>
  <option>選択肢3</option>
  <option>選択肢4</option>
</select>
<select name="sample8-3">
  <optgroup label="グループ1">
  <option>選択肢1</option>
  <option>選択肢2</option>
  </optgroup>
  <optgroup label="グループ2" disabled>
  <option>選択肢3</option>
  <option>選択肢4</option>
  </optgroup>
</select>

<select><option><optgroup>の属性一覧

<select><option><optgroup>で使える属性をまとめました。

name="セレクトメニューの名前（任意のテキスト）"

● <select>要素のみで使います。
送信先プログラムが部品を見分けるための名前なので、必ずつけておきましょう。
「セレクトメニューの名前=選択肢の名前（またはvalue属性の値）」というカタチで、セットで送信されます。

<select name="sample">
<option value="choice1">選択1</option>
</select>

value="初期値（任意のテキスト）"

● <option>要素のみで使います。
<option>要素で選択された選択肢の初期値。name属性の値とセットで送信されます。
これが指定されてない場合は、<option>要素の内容テキストが送信されます。

<select name="sample">
<option value="choice1">選択1</option>
</select>
<!-- この ↑ 場合は「sample=choice1」で送信されます -->
<select name="sample">
<option>選択1</option>
</select>
<!-- このように ↑ value属性が無ければ「sample=選択1」で送信されます -->

size="表示する選択肢の行数（数字）"

● <select>要素のみで使います。
size属性で、セレクトメニューの表示される行数を指定します。
size属性はデフォルトが「1」。「1」の場合は<select>はプルダウンメニューになります。（size属性を指定しなければ、デフォなのでプルダウンメニューってこと。）
「2」以上の数値を指定すると、<select>はリストボックスになり、指定した行数より選択肢が多い場合はスクロールバーを表示します。

<select name="sample" size="5">
〜省略〜
</select>

また、<select>に multiple属性 を指定した場合は、size属性のデフォルト値は「4」になります。（→「2」以上なので、自動的にリストボックスになるんです）

selected（または「selected=""」「selected="selected"」 ）　

● <option>要素のみで使います。
selected属性で、選択肢の１つを最初から選択された状態で表示します 。

<select name="sample">
<option>選択1</option>
<option>選択2</option>
<option selected>選択3</option>     <!-- ←この「選択3」が選択されて表示されます -->
</select>

label="任意のテキスト"

● <option>要素、<optgroup>要素で使います。
<option>要素の場合は、選択肢として表示するテキストになります。

<select name="sample">
<option label="選択1">choice1</option>
    <!-- 表示は「選択1」、送信は「sample=choice1」となります -->
</select>

<optgroup>要素の場合は「選択肢のグループ名」を表示する属性です。
<optgroup>要素は、必ずこの label属性と一緒に使います。

<select name="sample">
<optgroup label="選択グループ1">
<option>選択1</option>
<option>選択2</option>
<option>選択3</option>
</optgroup>
</select>

disabled（または「disabled=""」「disabled="disabled"」 ）　

選択不可能になります。選択できない状態にしたいときに使います。
<select>要素の場合は、セレクトメニュー全体が、選択不可能になります。
<option>要素の場合は、選択肢を個別に選択不可能にできます。
<optgroup>要素の場合は、グループごと選択不可能にできます。

multiple（または「multiple=""」「multiple="multiple"」 ）　

● <select>要素のみで使います。
複数の選択肢を選択できるようになります。
Winは「ctrlキー」Macは「コマンドキー」 を押しながら複数選択します。
この属性を指定すると、自動的に size属性 が「4」になり（size属性を指定してなくても）、<select>はリストボックスになります。
表示行数を4行以外にしたければ、size属性で指定します。

<select name="sample" multiple> 〜省略〜 </select>
<!-- この ↑ 場合は「size属性」は「4」になり、4行を表示するリストボックス -->
<select name="sample" multiple size="6"> 〜省略〜 </select>
<!-- この ↑ 場合は、6行を表示するリストボックス -->

●これ以降は、HTML5からの新しい属性です。

required（または「required=""」「required="required"」 ）　 new

● <select>要素のみで使います。
「選択必須」になります。何も選択せずに送信ボタンを押すとアラートが出ます。

<select required> 〜省略〜 </select>

autofocus（または「autofocus=""」「autofocus="autofocus"」 ）　 new

● <select>要素のみで使います。
● autofocus属性は、1つのHTML文書に1つだけ。（そりゃそうだ！）
HTML文書のロード後すぐに、この属性のある要素が自動的にフォーカスされます。

<select autofocus> 〜省略〜 </select>

form="<form>要素のID"　 new

● <select>要素のみで使います。
form属性で<form>要素につけたIDを呼び出して関連づけます。
これによって<select>要素が<form>要素の外に出ていても、選択された値を送信できます。

<select form="ex1">
<form action="sample.cgi" id="ex1">
<input type="submit" value="送信する">
</form>

「form属性」については、
「[47] form要素でデータ送信可能なフォームである事を示そう」の「HTML5からの変更点」もご覧ください。

このほかグローバル属性も使います

当然ながら、id, class, title, style などのグローバル属性も使えます。
グローバル属性については、「[39] 全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。

次回予告

次回は <datalist>要素です。
<datalist>要素は、単独でフォームの部品になるんじゃなくて、他の部品の補助的な働きをします。
<input>要素で作ったテキスト入力ができる部品の 入力候補をリストで出す 役割です。