menuitem 要素メニュー項目を表す

menuitem 要素は menu 要素におけるメニュー項目を表します。

この要素は、menu 要素に付与された type 属性値が context (ポップアップメニュー) の場合のみ、menu 要素の子要素として使用することができます。

さらに詳細な説明を見る

サンプルソースを見る

menuitem 要素の仕様

カテゴリ
  • なし
コンテンツモデル
この要素を使用できる文脈

type 属性値が context である menu 要素の子要素として

この要素で使用できる属性

この要素に対して使用される title 属性は、特別な意味をもちます。

DOM インタフェース
interface HTMLMenuItemElement : HTMLElement {
  attribute DOMString type;
  attribute DOMString label;
  attribute DOMString icon;
  attribute boolean disabled;
  attribute boolean checked;
  attribute DOMString radiogroup;
  attribute boolean default;
};

詳細説明

menuitem 要素に指定できる属性とその値は下記の通りです。

属性 概要
type 属性 項目のタイプを指定します。指定できる値は command、checkbox、radio の 3つです。属性が省略された場合、初期値は command になります。
label 属性 項目のラベルとして表示されます。空の値は認められません。
icon 属性 項目に表示するアイコンの URI を指定します。
disabled 属性 項目が無効であることを表します。
checked 属性 項目が初期状態で選択済みにします。type 属性の値が、checkbox、radio の場合のみ有効です。
radiogroup 属性 type 属性の値が radio の時、そのラジオボタンをグループにまとめます。input 要素の name 属性でラジオボタンがまとめられるのと同じで、ラジオボタンはグループの中で 1つだけ選択可能になります。
default 属性 その選択肢が初期値であることを表します。option 要素の selected 属性と同じ考え方です。

type 属性

type 属性に指定できる値は下記の通りです。値が省略されたり、type 属性を持たない場合は、初期値として command が与えられたものとして扱われます。

属性値 概要
command 通常のメニュー項目を表します。(初期値)
checkbox チェックボックスを表します。選択 / 未選択を切り替えることができます。
radio ラジオボタンを表します。同一グループのラジオボタンから 1つだけ選択可能になります。

menuitem 要素のサンプルソース

<form action="dosearch.pl">
 <p>
  <label>検索ワードを入力 <input type="text" name="terms" /></label>
 </p>
 <p>
  <input type="submit" contextmenu="formmenu" id="submitbutton" />
 </p>
 <p hidden="hidden">
  <input type="reset" id="resetbutton" />
 </p>
 <menu type="context" id="formmenu">
  <menuitem command="submitbutton" default="default" />
  <menuitem command="resetbutton" />
 </menu>
</form>
<button type="menu" menu="editmenu">Commands...</button>
<menu type="context" id="editmenu">
 <menuitem type="radio" radiogroup="alignment" checked="checked" label="右寄せ" icon="icons/alL.png" onclick="setAlign('left')" />
 <menuitem type="radio" radiogroup="alignment" label="中央寄せ" icon="icons/alC.png" onclick="setAlign('center')" />
 <menuitem type="radio" radiogroup="alignment" label="右寄せ" icon="icons/alR.png" onclick="setAlign('right')" />
 <hr />
 <menuitem type="command" disabled="disabled" label="出力" icon="icons/pub.png" onclick="publish()" />
</menu>

W3C HTML5 仕様書

4.12.4 The menuitem element