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

colmun_main2620

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

フォームについては、以下のページもご参照下さい。
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でアラート表示

目次

1.select要素
2.プルダウンリスト
3.リストボックス
4.<select><option><optgroup>の属性一覧

1.select要素

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

select要素は、size属性の値によって形が変わります。

size属性の値が1の場合は、プルダウンメニューになります。

size属性の値が2以上の場合は、リストボックスになります。

size属性は、表示する行数を指定する属性で、デフォルト値が1です。
ですので、size属性を指定しなければセレクトリストはプルダウンリストとなります。

multiple属性は、複数選択を可能にする属性ですので、multiple属性を指定すると、リストボックスによるセレクトリストとなります。
multiple属性を指定すると、size属性値が自動的に4となります。4以外も指定できますが、複数選択を可能にするという性質上、size=”1″としてもリストボックスとなります。
Winでは「ctrlキー」、Macでは「commandキー」を押しながら選択すると複数選択できます。

使用する要素 <select>~</select>
<option>~</option>
<optgroup>~</optgroup>
select要素の属性 name fieldset要素に固有の名前を付ける
size リストボックスの行数
multiple 複数選択を可能にする
required 必須項目にする
disabled リスト全体を使用不可の状態にする
form 親のform要素のID名を呼び出して関連付ける
autofocus ロード後、自動的にフォーカスする
option要素の属性 value 送信するデータ値
select要素のname属性値とセットで送る
selected 特定の選択肢を最初から選ばれた状態にする
disabled 特定の選択肢を使用不可の状態にする
label 選択肢の表示テキスト
optgroup要素の属性 label 選択肢グループの表示テキスト
disabled 特定の選択肢のグループを使用不可の状態にする

▲目次へ戻る

2.プルダウンリスト

●select要素にname属性だけを指定すると、次のようなプルダウンリストになります。


上のリストに対するhtmlコードは、以下の通りです。

<select name=”list_1″>
 <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>

name属性の値は、option要素のvalue属性の値とセットで送信されるので、必ず指定します。

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

option要素で選択肢を作ります。
option要素の1行目は、デフォルト表示される行なので、一般的にユーザへのメッセージ用に使う場合が多く、上の例でもそのようにしています。
ですので、value属性の値を設定していません(データ送信の必要がないため)。

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


上のリストに対するhtmlコードは、以下の通りです。

<select name=”list_2″>
 <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以上に指定するとリストボックスになります。


上のリストに対するhtmlコードは、以下の通りです。

<select name=”list_3″ 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属性を指定しただけでもリストボックスになります。

上のリストに対するhtmlコードは、以下の通りです。

<select name=”list_4″ 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では「commandキー」を押しながら選択すると複数選択できます(複数選択の方法を表示した方が親切です)。

▲目次へ戻る

4.<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の場合はプルダウンリストとなります。
2以上の数値を指定すると、リストボックスになり、指定した行数より選択肢が多い場合はスクロールバーが表示されます。

また、select要素にmultiple属性を指定した場合は、size属性のデフォルト値が4になります。

 <select name=”sample” size=”5″>
  ・・・
 </select>

selected または selected=”” または selected=”selected”
●option要素のみで使います。

選択肢の1つを最初から選択された状態で表示します。

 <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は「commandキー」 を押しながら複数選択します。

この属性を指定すると、自動的に size属性が4になり、セレクトリストはリストボックスとなります。
size属性で4以外の数値を指定することもできます。

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

required または required=”” または required=”required”
●select要素のみで使います。

選択必須状態になります。
選択せずに送信ボタンを押すとアラートが出ます。

 <select required> ・・・ </select>

autofocus または autofocus=”” または autofocus=”autofocus”
●select要素のみで使います。

HTML文書のロード後すぐに、この属性の指定がある要素が自動的にフォーカスされます。
ですので、その性質上、1つのHTML文書に1つだけ指定できます。

 <select autofocus> ・・・ </select>

form=”form要素のID”
●select要素のみで使います。

form属性でform要素に付けたIDを呼び出して関連付けます。
form属性でform要素のIDを指定することによって、select要素がform要素の外に出ていても、選択された値を送信できます。

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

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です