今回は、フォームで使われる部品の中で、セレクトリストの作り方を紹介します。
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%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
目次
セレクトリストは、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 |
選択肢グループを使用不可の状態にする |
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 要素を使って、選択肢をグループ分けしてみます。
上のサンプルのソースコードは次の通りです。
<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 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 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 に変わり、表示の形態はリストボックスとなります。
INTERNOUS,inc. All rights reserved.