option要素
Webページでは、選択可能なメニューを作成することができます。
本ページでは、option要素について説明します。
option要素とは
option要素は、select要素などの子要素として使い、選択肢(リスト)の1つを設定します。
optionの定義は、以下のとおりです。
コンテンツカテゴリ | なし |
---|---|
可能な親要素 | select、datalist、optgroup |
可能なコンテンツ | テキスト |
タグの省略 | 開始タグは必須。 終了タグは、直後に別のoption、またはoptgroup要素が続く場合、親要素にこれ以上コンテンツがない場合は省略可能。 |
DOMインターフェース | HTMLOptionElement |
利用例
以下は、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 | 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要素(タグ)一覧」に戻る