カスタム検索

<select>タグ

<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>もネストします。

<select>にネストされるタグ
タグ名 機能 詳細
<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>&lt;select&gt;の例</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に関することなのでこのサイトでは触れません。

CopyLeft 2021 Webデザインレッスン プライバシーポリシー サイト管理者に連絡