カスタム検索

<option>タグ

<option>タグは、<select>タグで選択リストが定義された中に、選択項目を定義します。項目は、作成したい分だけ<option>タグを使用して定義します。

value属性を指定しなければ、<option>と</option>の間に記述された内容が値として送信されます。

<option>タグの機能と属性
機能 選択リストの項目を定義
属性 HTML-4.01 コア 言語 イベント  selected  disabled  label  value  
XHTML-1.0 コア 言語 イベント  selected  disabled  label  value  
備考 XHTML2では廃止になっている

selected属性

selected属性を使用すると、選択リストの各項目の中で、すでに選択された状態の項目を指定することができます。この属性を指定しない場合、プルダウン形式の場合は、最初に定義された項目が選択されている状態となり、スクロール形式の場合は、何も選択されていない状態となります。

disabled属性

disabled属性を指定すると、選択リストの項目を使用不可にします。ブラウザには表示されるが、何もできない状態になります。

label属性

選択リストに表示される各項目は、<option>と</option>の間に記述されたテキストになりますが、label属性を使用すると、指定した値を表示させることができます。

value属性

選択リストで選択された項目は、<select>タグのname属性の値と、<option>と</option>の間に記述されたテキストを値としてセットで送信されます。value属性を指定すると、<option>と</option>の間のテキストではなく、value属性で指定した値を送信することができます。

入力例

次の例では、label属性で5を指定しているので、選択リストには4ではなく、5が表示されます。また、value属性で6を指定しているので、送信される値は5ではなく、6になります。

option.html
<html>
    <head>
        <title>&lt;option&gt;の例</title>
    </head>
    <body>
        <form action="プログラムのパス" method="get">
            <select name="list">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
            </select>
            <select name="list_2">
                <option>1</option>
                <option selected="selected">2</option>
                <option disabled="disabled">3</option>
                <option label="5">4</option>
                <option value="6">5</option>
            </select>
        </form>
    </body>
</html>
CopyLeft 2021 Webデザインレッスン プライバシーポリシー サイト管理者に連絡