サイト内検索

...HTML・XHTMLタグ...

フォーム

セレクトボックス

セレクトボックスは、select要素を指定します。
select要素の中にoption要素を使って、メニュー内の選択肢を書きます。
optionの終了タグは、省略することも可能です。
[使い方]
<select name="sample">
<option value="サンプル">ここの文字が表示されます。
</select>
セレクトボックスの形式
プルダウン形式・リスト形式の2種類の表示方法があります。
select要素
<select name="sample" size="6" multiple> </select>
属性 属性値 説明
name= "" 「"sample"」のように部品名を指定します。
半角英数字を指定します。
size=""「"10"」のように 表示行数を指定します。(1がデフォルトです)
・・・・・・
「1」を指定するとプルダウン形式のメニューになり、
複数行を指定するとリスト形式のメニューになります。
指定のない場合は、
(標準値・初期設定値)size="1"が適用されます。
multiple属性値は不要です。
複数の選択が可能になります。
・・・・・・
自動的にリスト形式になります。
option要素
<option value="サンプル" selected> </option>
属性 属性値 説明
value= "" 「"送信します"」のように送信される内容を指定します。
・・・・・・
その選択肢が選ばれたときに、
value="" の中に書いた内容が送信されます。
selected属性値は不要です。
最初から選択された状態にします。
・・・・・・
selected を指定した選択肢は、
最初から選択された状態になります。
[メモ]
HTML 4.01 Strict ・ XHTML1.0 Strictでは
(selected="selected")を指定します。

サンプル

《プルダウン形式(2行目を選択)》

[bodyの中]

<form method="post" action="sample.cgi">
<div class="sample">
行きたい国は?:
<select name="kuni1">
<option value="アメリカ">アメリカ</option>
<option value="カナダ" selected>カナダ</option>
<option value="フランス">フランス</option>
<option value="イタリア">イタリア</option>
<option value="オーストラリア">オーストラリア</option>
</select>
</div>
<input type="submit" value="送信する">
</form>

[ブラウザ上]

行きたい国は?:

←サンプル(送信できません。)

《リスト形式》

[bodyの中]

<form method="post" action="sample.cgi">
行きたい国は?:
<select name="kuni2" size="5">
<option value="アメリカ">アメリカ</option>
<option value="カナダ">カナダ</option>
<option value="フランス">フランス</option>
<option value="イタリア">イタリア</option>
<option value="オーストラリア">オーストラリア</option>
</select>
<input type="submit" value="送信する">
</form>

[ブラウザ上]

行きたい国は?:

←サンプル(送信できません。)


Copyright c 2007.10.01 luc All rights reserved.