HTML5

タグ(要素)

OPTION

  編集:2022.06.27 by T.A.

mdn

リスト ボックス、コンポ ボックス内の項目を表す。

この要素を使用できる文脈

SELECT 要素の子として。

DATALIST 要素の子として。

OPTGROUP 要素の子として。

内容モデル

要素が label 属性および value 属性を持つ場合: Nothing

要素が label 属性を持つが value 属性を持たない場合: テキスト

要素が label 属性を持たず、かつ DATALIST 要素の子でない場合: 要素間の空白文字でないテキスト。

要素が label 属性を持たず、かつ datalist 要素の子である場合: テキスト

text/htmlにおけるタグ省略

OPTION 要素が別の OPTION 要素または OPTGROUP 要素の直後に存在する場合、または親要素に追加の内容が存在しない場合、OPTION 要素の終了タグは省略することができる。

内容属性
解説

SELECT 要素でまたは DATALIST 要素で提案のリストの一部としてオプションを表す。

SELECT の定義で記載されるある特定の状況において、OPTION 要素は、SELECT 要素のプレースホルダーのラベル オプションとなることができる。プレースホルダーのラベル オプションは、実際のオプションを表さないが、SELECT 制御のラベルを表す。

<!DOCTYPE HTML>
<HTML>
<BODY>
<SELECT name="テスト結果">
 <OPTION value="上">上
 <OPTION value="中">中
 <OPTION value="下">下
</SELECT>
</BODY>
</HTML>
関連

SELECTDATALISTOPTGROUP


disabled属性

フォーム制御が無効であるかどうか。真偽属性

これが存在する場合、または disabled 属性である OPTGROUP 要素の子が存在する場合、OPTION 要素は無効である。

<SELECT>
 <OPTION>OPTION1
 <OPTION disabled>OPTION2
 <OPTION>OPTION3
</SELECT>

label属性

要素のラベルを提供する。

属性が存在し、かつその値が空文字列でない場合、OPTION のラベルは label 内容属性の値であり、そうでなければ、要素の text IDL 属性の値となる。

label 内容属性が指定される場合、空であってはならない。

<SELECT>
 <OPTION>OPTION1
 <OPTION label="ラベル">OPTION2
 <OPTION>OPTION3
</SELECT>

selected属性

デフォルトでオプションが選択されるかどうか。真偽属性

これは、要素のデフォルトで選択されることを表す。

<SELECT>
 <OPTION>OPTION1
 <OPTION selected>OPTION2
 <OPTION>OPTION3
</SELECT>

value属性

フォーム送信に対して使用される値。

この要素の値を提供する。属性が存在する場合、OPTION の値は value 内容属性の値であり、存在しない場合、要素の text IDL 属性の値となる。

<FORM action="○○.cgi" method=post target=Test style="border:1px solid black;">
 <SELECT name=NvalueSelect>
  <OPTION value=1>OPTION1
  <OPTION value=2>OPTION2
  <OPTION value=3>OPTION3
 </SELECT><BR>
 <BUTTON type=submit>送信</BUTTON>
</FORM>

¶送信して、サーバーCGIはデータ「NvalueSelect=1」などを受け取る?


テスト
HTML:

ここに表示
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: