<option></option>

更新日
仕様 HTML Living Standard
分類 ---
利用場所 select要素optgroup要素datalist要素の子要素として
内容 label属性とvalue属性がある場合:無し / label属性はあるがvalue属性がない場合:テキスト / label属性がなく、datalist要素の子要素でない場合:テキスト(空白文字のみは不可) / label属性がなく、datalist要素の子要素である場合:テキスト(空白文字のみも可能)

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


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

<datalist id="example">
<option value="選択肢1"></option>
<option value="選択肢2"></option>
<option value="選択肢3"></option>
</datalist>

属性
任意属性
value="" option要素の値 文字列 選択時の値
label="" 選択肢のラベル 文字列 選択肢として表示する文字列
selected 選択された状態にする selected 値は省略可能
disabled 選択肢の無効化 disabled 値は省略可能

option要素の値と表示テキストにつてい

option要素は、value属性label属性の有無により、option要素の値表示テキストの扱いが次のように変化します。

1. <option value="">表示テキスト</option>

2. <option label="表示テキスト"></option>

3. <option>値と表示テキスト</option>

4. <option value="" label="表示テキスト"></option>

1番目のoption要素は、value属性の値がoption要素の値になり、option要素の内容が表示テキストになります。

2番目のoption要素は、label属性の値が表示テキストになり、option要素の内容がoption要素の値になります。

3番目のoption要素は、option要素の内容がoption要素の値かつ表示テキストになります。

4番目のoption要素は、option要素の値表示テキストを属性値として指定しています。この場合は、option要素の内容は空にしなければなりません。


option要素の値は、select要素またはdatalist要素内において、次のように使用されることになります。

select要素内
そのoption要素が選択されている場合に、フォーム送信時の値として使用されます。
datalist要素内
そのoption要素が選択された際に、入力欄に挿入される値として使用されます。

value属性について

value属性は、option要素の値を指定します。

<option value="">表示テキスト</option>

この属性を省略した場合は、option要素の内容が値として扱われます。

label属性について

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

  • label属性の値は空であってはなりません。
<option label="表示テキスト"></option>

この属性を省略した場合は、option要素の内容が表示されることになります。

selected属性について

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

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

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

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

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

disabled属性について

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

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

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

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

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

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

select要素が特定の状態にある場合は、プレースホルダ・ラベル・オプションを配置しなければなりません。

詳しくはselect要素のプレースホルダ・ラベル・オプションについてをご覧ください。

旧HTMLからの変更点
  • HTML5:datalist要素の子要素としても使用できるようになりました。
  • HTML5:プレースホルダ・ラベル・オプションの意味が追加されました。
  • HTML5.1:要素のコンテンツ・モデルが変更されました。

使用例

selected属性を指定した例

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

表示例
value属性を指定した例

<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>

表示例
label属性を指定した例

<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>

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

<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>

表示例
disabled属性を指定した例

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

表示例