サイト内検索
...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>
[ブラウザ上]