option要素

option要素とは

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

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

利用例

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

<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属性の利用例は、以下のとおりです。

<select name="test">
  <option value="apple">りんご</option>
  <option value="orange" disabled>みかん</option>
</select>

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

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

label属性の利用例

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

<select name="test">
  <option value="apple" label="りんご">
  <option value="orange" label="みかん">
</select>

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

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

selected属性の利用例

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

<select name="test">
  <option value="apple">りんご</option>
  <option value="orange" selected>みかん</option>
</select>

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

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

value属性の利用例

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

<select name="test">
  <option>apple</option>
  <option>orange</option>
</select>

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

datalist内での利用例

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

<input type="text" name="test" list="fruit">
<datalist id="fruit">
  <option value="りんご">
  <option value="みかん">
</datalist>

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

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

ブラウザのサポート状況

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

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

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