option要素

Webページでは、選択可能なメニューを作成することができます。

本ページでは、option要素について説明します。

option要素とは

option要素は、select要素などの子要素として使い、選択肢(リスト)の1つを設定します。

optionの定義は、以下のとおりです。

【optionの定義】
コンテンツカテゴリ なし
可能な親要素 select、datalist、optgroup
可能なコンテンツ テキスト
タグの省略 開始タグは必須。
終了タグは、直後に別のoption、またはoptgroup要素が続く場合、親要素にこれ以上コンテンツがない場合は省略可能。
DOMインターフェース HTMLOptionElement

利用例

以下は、optionを使ったHTMLの例です。

【optionの利用例】
<form method="post" action="test.php">
<select name="test">
  <option value="apple">りんご</option>
  <option value="orange">みかん</option>
</select>
<button type="submit">送信</button>
</form>

上記により、以下のように表示されます。

ブラウザの画面で、選択リスト(りんごだけ初期表示)と送信ボタンが表示されています。

りんごと表示されている箇所でクリックすると、みかんを選択することが可能です。

送信ボタンをクリックすると、selectのname="test"と選択した値(例:orange)が、test=値でtest.phpに送信されます。test.phpでは、データを処理するプログラムが必要です。

属性

グローバル属性と、以下が使えます。

disabled
選択ができないようになります。
label
選択肢として表示する文字列を指定します。
selected
ページが表示された時に、選択された状態になります。
value
サーバに送信する時の値を指定します。

次からは、各属性の利用例を示します。また、最後にはselect要素ではなく、datalist内での利用例も示します。

disabled属性の利用例

disabled属性の利用例は、以下のとおりです。

【disabled属性の利用例】
<select name="test">
  <option value="apple">りんご</option>
  <option value="orange" disabled>みかん</option>
</select>

上記は、以下のように表示されます。

みかんは、通常より薄く表示されていて、選択できないことがわかります。

label属性の利用例

label属性の利用例は、以下のとおりです。

【label属性の利用例】
<select name="test">
  <option value="apple" label="りんご">
  <option value="orange" label="みかん">
</select>

上記は、以下のように表示されます。

labelの内容が、選択肢として表示されています。

selected属性の利用例

selected属性の利用例は、以下のとおりです。

【selected属性の利用例】
<select name="test">
  <option value="apple">りんご</option>
  <option value="orange" selected>みかん</option>
</select>

上記は、以下のように表示されます。

最初は、「みかん」が選択された状態になっています。

value属性の利用例

最初に、valueの利用例は示したので、以下にvalueを省略した時の例を示します。

【value属性を使わない例】
<select name="test">
  <option>apple</option>
  <option>orange</option>
</select>

この場合、コンテンツ(上の例ではappleやorange)が値になります。appleを選択していれば、test=appleでデータが送信されます。

datalist内での利用例

datalist内での利用例は、以下のとおりです。

【datalist内での利用例】
<input type="text" name="test" list="fruit">
<datalist id="fruit">
  <option value="りんご">
  <option value="みかん">
</datalist>

上記により、以下のように表示されます。

入力欄をクリック(ブラウザによっては2回)すると、りんごとみかんが選択できるようになります。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
option
disabled
label
selected
value
【スマートフォン】
項目 Sa An Op Ch Fx Sm
option
disabled
label
selected
value
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

HTML要素(タグ)一覧」に戻る