HTML - optgroup / option 要素

概要

名前
optgroup / option
カテゴリー
optgroup
なし。
option
なし。
配置できる場所
optgroup
select 要素の子要素として配置すること。
option
select 要素、または datalist 要素、または optgroup 要素の子要素として配置すること。
コンテンツモデル
optgroup
0 個以上の option 要素。
option
label 属性、value 属性の両方を持つ場合、中身は空でなければいけない。label 属性を持ち、かつ value 属性を持たない場合、空、またはテキストノード。label 属性を持たず、かつ datalist 要素の子要素でない場合、内容のあるテキストノード。label 属性を持たず、かつ datalist 要素の子要素である場合、空、またはテキストノード。
説明
optgroup
optgroup 要素は、option 要素をグループ化し、そのグループにラベルを付ける要素です。
option
option 要素は、select 要素の各選択肢、または datalist 要素が提供するサジェスト機能の各入力候補となる要素です。
タグの省略
optgroup
別の optgroup 要素が後に続く場合、終了タグを省略できる。または、親要素にこれ以上コンテンツがない場合、終了タグを省略できる。
option
別の option 要素、または optgroup 要素が後に続く場合、終了タグを省略できる。または、親要素にこれ以上コンテンツがない場合、終了タグを省略できる。
DOM Interface
optgroup
HTMLOptGroupElement
option
HTMLOptionElement
仕様書
要素仕様書策定状況コメント
optgroupLS:現行の標準
REC:勧告
REC:勧告
optionLS:現行の標準
REC:勧告
REC:勧告
サポートブラウザ
要素 ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
optgroup5.511
option11
○:Support ×:Not Support ?:未定義 n:以降の Version で Support

optgroup 要素の属性

optgroup 要素の属性サポートブラウザ
属性名 ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
disabled811
label5.511
○:Support ×:Not Support ?:未定義 n:以降の Version で Support
グローバル属性
すべての要素で共通に利用できるグローバル属性を指定できます。
disabled
この論理属性が指定された場合、このオプショングループ内の項目のいずれも選択不能となります。多くの場合、ブラウザはそのコントロールをグレーアウトで表示し、マウスクリックやフォーカスなど、いかなるイベントも受け付けなくなります。
label
ブラウザがユーザインターフェイス上の選択肢にラベル付けするのに使用できるオプションのグループの名前です。この要素を使用する場合には、この属性は必須です。

option 要素の属性

option 要素の属性サポートブラウザ
属性名 ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
disabled11
label11
selected11
value11
○:Support ×:Not Support ?:未定義 n:以降の Version で Support
グローバル属性
すべての要素で共通に利用できるグローバル属性を指定できます。
disabled
この論理属性を設定すると、選択肢が選択不能になります。多くのブラウザはそのようなコントロールをグレーアウトで表示し、マウスクリックやフォーカスなど、いかなるイベントも受け付けなくなります。この属性を設定していなくても、祖先のいずれかが無効状態の optgroup 要素である場合は無効化されます。
label
この属性は、選択肢の意味を示すラベル文字列です。label 属性を定義していない場合は、要素の文字列コンテンツが要素の値になります。
selected
この論理属性を設定すると、その選択肢が初期状態で選択されます。option 要素が multiple を設定していない select 要素の子孫である場合、select 要素内で 1 個の option だけが selected 属性を持てます。
value
この属性の内容は、フォームで送信する値を表します。値を送信するには、選択肢を選択しなければなりません。この属性を省略すると option 要素の中の文字列が値になります。

サンプルコード

optgroup / option 要素のサンプルコードは以下のとおりです。

<label>Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster" disabled>Hamster</option>
    </optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrot</option>
      <option value="macaw">Macaw</option>
      <option value="albatross">Albatross</option>
    </optgroup>
  </select>
</label>
optgroup / option 要素のサンプルコード

関連記事

Category:
プログラミング
公開日:
更新日:
Pageviews:
103
Shares:
0
Tag:
HTML