column

ITコラム

colmun_main2620

プログラミングノウハウ

2017.02.23

HTML【フォーム】8~セレクトリスト

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

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

HTML 【フォーム】1 ~ フォームの概要とform要素の属性一覧
HTML 【フォーム】2 ~ form要素の使い方
HTML 【フォーム】3 ~ form要素で使う主な属性の使い方
HTML 【フォーム】4 ~ fieldset要素とlegend要素
HTML 【フォーム】5 ~ input要素(1)フォーム部品一覧
HTML 【フォーム】5 ~ input要素(2)テキスト入力部品
HTML 【フォーム】5 ~ input要素(3)ラジオボタンとチェックボックス
HTML 【フォーム】5 ~ input要素(4)日時の入力部品
HTML 【フォーム】5 ~ input要素(5)数値の入力部品
HTML 【フォーム】5 ~ input要素(6)レンジ(range)の入力部品
HTML 【フォーム】5 ~ input要素(7)色(color)の入力部品
HTML 【フォーム】5 ~ input要素(8)ファイル送信のための部品
HTML 【フォーム】5 ~ input要素(9)隠し情報(hidden)
HTML 【フォーム】5 ~ input要素(10)ボタン(submit、reset、button)
HTML 【フォーム】5 ~ input要素(11)画像ボタン(image)
HTML 【フォーム】6 ~ button要素で作るボタン
HTML 【フォーム】7 ~ ボタンの作り方比較とJavaScriptでアラート表示
HTML 【フォーム】8 ~ セレクトリスト( 本ページ )
HTML 【フォーム】9 ~ 入力候補(datalist)
HTML 【フォーム】10 ~ テキストエリア(textarea)
HTML 【フォーム】11 ~ ラベル(label)
HTML 【フォーム】12 ~ 出力欄(output)
HTML 【フォーム】13 ~ 数量や割合のゲージ(meter)
HTML 【フォーム】14 ~ 進捗状況を示すプログレスバー(progress)
HTML 【フォーム】15 ~ キーを発行して暗号化(keygen)
HTML 【フォーム】16 ~ CSSでフォームを整える

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1.select 要素、option 要素、optgroup 要素

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

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

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

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

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

<select size="2">
  <option value="">リストボックス</option>
  <option value="1">リスト1</option>
  <option value="2">リスト2</option>
  <option value="3">リスト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
ロード後 フォーカスを当てる

 
option 要素の属性

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

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

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

label
選択肢の表示テキスト

 
optgroup 要素の属性

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

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

▲目次へ戻る

2.プルダウンメニュー

 

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要素の1番目は、デフォルト表示されるテキストなので、上記のように選択肢の内容を表示させたり 「選択して下さい」のようなメッセージを表示させたりするために使用することが多いです。
そのような場合は 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 属性を指定しないと、上のようなリスト表示になりません。

▲目次へ戻る

3.リストボックス

 

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

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

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

<select  name="select3" 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>

 

select 要素の multiple 属性を指定

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

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

<select  name="select4" multiple>
 <option value="">ctrl キーで複数選択できます</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 属性を指定すると ctrl キー( Mac では command キー )を押しながら複数の選択肢を選ぶことができるようになります。
そして、size 属性のデフォルト値は 4 に変わり、表示の形態はリストボックスとなります。

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ