|
カスタム検索
|
|
 <select> |
|
|||||||||||||||||
<select>タグ| 機能 | 選択リストを定義 | |
|---|---|---|
| 属性 | HTML-4.01 | コア 言語 イベント name size multiple disabled tabindex onfocus onblur onchange |
| XHTML-1.0 | コア 言語 イベント name size multiple disabled tabindex onfocus onblur onchange | |
<select>タグは、選択リストを定義するだけで、選択項目を作成するには、<option>タグをネストしなければなりません。また、<select>タグは、<option>で定義された項目をグループ化する<optgroup>もネストします。
| タグ名 | 機能 | 詳細 |
|---|---|---|
| <option> | 選択リストの項目を定義 | 詳細 |
| <optgroup> | 選択リストの項目をグループ化する | 詳細 |
name属性
name属性は、<select>要素に名前を付けます。ここで付けられた名前は、送信されたフォームを処理するプログラム等から参照されます。<select>タグには、このname属性は必須です。
プログラムから参照されるので、名前の付け方には注意が必要です。当然、日本語はダメで、記号等も使わないでください。また、最初の文字が数字にならないようにし、スペースが必要な場合は、代わりに「_」（アンダーバー）を使用するようにしてください。そうしないとプログラムでの処理に問題が発生する場合があります。
フォームでのname属性は、<a>タグ等で使用されるname属性とは役割が異なるものです。
size属性
size属性は、選択リストを何行分表示させるか指定することができます。この属性を指定しない場合は、1が初期値として設定され、プルダウン形式となります。
1より大きい数値を指定した場合は、選択リストはスクロールによるものになります。
multiple属性
multiple属性を指定すると、altキーやcommandキーを押しながらクリックすることで、複数の項目を選択できる選択リストになります。この場合、選択リストはスクロール形式になります。
disabled属性
disabled属性を指定すると、選択リストを使用不可にします。ブラウザには表示されるが、何もできない状態になります。
入力例
入力例です。各属性の働きを確認してみてください。
select.html
<html>
<head>
<title><select>の例</title>
</head>
<body>
<form action="プログラムのパス" method="get">
<div>
<select name="list">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div>
<select name="list_2" size="2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div>
<select name="list_3" multiple="multiple">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div>
<select name="list_4" disabled="disabled">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</form>
</body>
</html>
tabindex属性、onfocus属性、onblur属性
共通して使用される属性を参照してください。
onchange属性
onchange属性は、選択リストが操作されたときのブラウザの動作を指定します。ただし、これらの属性はJavaScriptに関することなのでこのサイトでは触れません。
<textarea>
ページの先頭
2024 Webデザインレッスン