<option></option>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 ---
利用場所 select要素optgroup要素datalist要素の子要素として
内容 label属性とvalue属性がある場合:空 / label属性はあるがvalue属性がない場合:テキスト / label属性がない場合:テキスト

option要素は、プルダウンメニューの選択肢、または入力候補リストの選択肢を作成します。この要素は、select要素optgroup要素datalist要素の子要素として使用します。


<select name="example">
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3" selected>選択肢3</option>
</select>

属性
任意属性
value="" 送信される値 文字列 選択時の値
label="" 選択肢のラベル 文字列 選択肢として表示する文字列
selected 選択された状態にする selected 値は省略可能
disabled 選択肢の無効化 disabled 値は省略可能
  • 以下は、プルダウンメニューで使用する場合の説明となります。入力候補リストで使用する場合は、datalist要素のページを参考にしてください。

送信される値と表示されるテキスト

value属性が指定されている場合は、value属性の値が送信されます。この属性がない場合は、option要素の内容が送信されることになります。

<option value="送信される値">表示されるテキスト</option>

<option>送信される値(表示されるテキストにもなる)</option>

label属性が指定されている場合は、label属性の値が選択肢のテキストとして表示されます。この属性がない場合は、option要素の内容が表示されることになります。

  • ただし、label属性に対応していないブラウザもあります。(その場合はoption要素の内容が表示されます)
<option label="表示されるテキスト">送信される値</option>

<option>表示されるテキスト(送信される値にもなる)</option>

value属性について

value属性は、送信される値を指定します。

この属性の値は、その選択肢が選択されている場合に送信されます。

<option value="送信される値">表示されるテキスト</option>

この属性を省略した場合は、option要素内のテキストが送信されることになります。

label属性について

label属性は、選択肢として表示するテキストを指定します。

  • この属性に対応していないブラウザもあります。(Firefox 11 など)
<option label="表示されるテキスト">送信される値</option>

この属性を省略した場合、または未対応のブラウザでは、option要素内のテキストがメニューの選択肢として表示されることになります。


value属性label属性を同時に指定した場合は、option要素の内容は空にしておく必要があります。

<option value="送信される値" label="表示されるテキスト"></option>

selected属性について

selected属性は、最初から選択された状態を指定します。

次の例では、選択肢3が選択された状態になります。

<select name="example">
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3" selected>選択肢3</option>
<option value="選択肢4">選択肢4</option>
<option value="選択肢5">選択肢5</option>
</select>

select要素にmultiple属性が指定されている場合は、複数の選択肢にselected属性を指定することができます。

<select name="example" multiple>
<option value="選択肢1">選択肢1</option>
<option value="選択肢2" selected>選択肢2</option>
<option value="選択肢3">選択肢3</option>
<option value="選択肢4" selected>選択肢4</option>
<option value="選択肢5">選択肢5</option>
</select>

disabled属性について

disabled属性は、選択肢の無効化を指定します。

無効化された選択肢は、選択することができなくなります。

<select name="example">
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3" disabled>選択肢3</option>
<option value="選択肢4">選択肢4</option>
<option value="選択肢5">選択肢5</option>
</select>

プレースホルダ・ラベル・オプションについて

プレースホルダ・ラベル・オプションとは、簡単に言ってしまえば値が設定されていないメニュー項目のことです。例えば、▼項目を選択してくださいといった感じで表示される項目がそれにあたります。

<select name="example" required>
<option value="">選択してください</option>
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3">選択肢3</option>
</select>

上記の例では、選択してくださいと書かれているoption要素がプレースホルダ・ラベル・オプションになります。

条件は次のようになります。

  1. select要素required属性が指定されていて、かつmultiple属性が指定されていない。
  2. select要素size属性1 の状態である。(初期値)
  3. select要素の直下にoption要素が置かれている。(optgroup要素を使用していない)

上記の条件下において、最初のoption要素のvalue属性の値が空の場合には、そのoption要素がプレースホルダ・ラベル・オプションとなります。

そして、上記の 12 の条件に当てはまるselect要素は、プレースホルダ・ラベル・オプション持たなければならないとされています。

HTML5における変更点
  • datalist要素の子要素としても使用できるようになりました。
  • プレースホルダ・ラベル・オプションが定義されました。
HTML 5.1における変更点
  • 厳密には、コンテンツモデルがほんの少しだけ変わってます。(このページの情報はHTML 5.1に合わせてあります)

使用例

selected属性を指定した例

<p>
<select name="example">
<option>選択肢のサンプル1</option>
<option>選択肢のサンプル2</option>
<option selected>選択肢のサンプル3</option>
<option>選択肢のサンプル4</option>
<option>選択肢のサンプル5</option>
</select>
</p>

表示例

value属性を指定した例

<p>
<select name="example">
<option value="選択肢1">選択肢のサンプル1</option>
<option value="選択肢2">選択肢のサンプル2</option>
<option value="選択肢3">選択肢のサンプル3</option>
<option value="選択肢4">選択肢のサンプル4</option>
<option value="選択肢5">選択肢のサンプル5</option>
</select>
</p>

表示例

label属性を指定した例

<p>
<select name="example">
<option label="選択肢のサンプル1">選択肢1</option>
<option label="選択肢のサンプル2">選択肢2</option>
<option label="選択肢のサンプル3">選択肢3</option>
<option label="選択肢のサンプル4">選択肢4</option>
<option label="選択肢のサンプル5">選択肢5</option>
</select>
</p>

表示例

value属性とlabel属性を指定した例
  • この場合は、option要素の内容は空にしておく必要があります。

<p>
<select name="example">
<option value="選択肢1" label="選択肢のサンプル1"></option>
<option value="選択肢2" label="選択肢のサンプル2"></option>
<option value="選択肢3" label="選択肢のサンプル3"></option>
<option value="選択肢4" label="選択肢のサンプル4"></option>
<option value="選択肢5" label="選択肢のサンプル5"></option>
</select>
</p>

表示例

disabled属性を指定した例

<p>
<select name="example">
<option value="選択肢1">選択肢のサンプル1</option>
<option value="選択肢2">選択肢のサンプル2</option>
<option value="選択肢3" disabled>選択肢のサンプル3</option>
<option value="選択肢4" disabled>選択肢のサンプル4</option>
<option value="選択肢5">選択肢のサンプル5</option>
</select>
</p>

表示例