プルダウンメニューまたは入力候補の選択肢を表す

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

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要素のプレースホルダ・ラベル・オプションについてをご覧ください。