html5/spec/the-command-element.html - view

File: [Public] / html5 / spec / the-command-element.html
Revision 1.202: download - view: text, annotated - select for diffs
Wed Nov 21 04:44:09 2012 UTC (12 years, 5 months ago) by sruby
Branches: MAIN
CVS tags: HEAD

commit 1077bca89fbac7a99525653cda746ae1c3e87409
Author: Silvia Pfeiffer <silviapfeiffer1@gmail.com>
Date:   Wed Nov 21 15:38:38 2012 +1100

    [Editorial] Update of revision number up to which WHATWG changes have
    been merged.

<!DOCTYPE html><html lang="en-US-x-Hixie"><meta charset="utf-8"><title>4.11.3 The command element — HTML5</title><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { white-space: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('fonts/Essays1743-BoldItalic.ttf'); } </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20{%20display:%20none;%20}%0Ahtml%20{%20border:%20solid%20yellow;%20}%20.domintro:before%20{%20display:%20none;%20}" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20{%20background:%20%23FFEEEE;%20}%20.domintro:before%20{%20background:%20%23FFEEEE;%20}" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } i, em { font-style: italic; } dt dfn { font-style: italic; } pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } pre em { font-weight: bolder; font-style: normal; } @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } table { border-collapse: collapse; border-style: hidden hidden none hidden; } table thead, table tbody { border-bottom: solid; } table tbody th:first-child { border-left: solid; } table tbody th { text-align: left; } table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } .matrix, .matrix td { border: none; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } img.extra, p.overview { float: right; } pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; position: relative; } pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } pre.idl::before { content: "IDL"; font: bold small sans-serif; padding: 0.5em; background: white; position: absolute; top: 0; margin: -1px 0 0 -4em; width: 1.5em; border: thin solid; border-radius: 0 0 0 0.5em } pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } pre.css:first-line { color: #AAAA50; } dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; } hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } dl.domintro dd p { margin: 0.5em 0; } dl.domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; } dl.switch { padding-left: 2em; } dl.switch > dt { text-indent: -1.5em; } dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } dl.triple { padding: 0 0 0 1em; } dl.triple dt, dl.triple dd { margin: 0; display: inline } dl.triple dt:after { content: ':'; } dl.triple dd:after { content: '\A'; white-space: pre; } .diff-old { text-decoration: line-through; color: silver; background: transparent; } .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } a .diff-new { border-bottom: 1px blue solid; } figure.diagrams { border: double black; background: white; padding: 1em; } figure.diagrams img { display: block; margin: 1em auto; } h2 { page-break-before: always; } h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } h1 + h2, hr + h2.no-toc { page-break-before: auto; } p > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]) { border-bottom: solid #9999CC; } div.head { margin: 0 0 1em; padding: 1em 0 0 0; } div.head p { margin: 0; } div.head h1 { margin: 0; } div.head .logo { float: right; margin: 0 1em; } div.head .logo img { border: none } /* remove border from top image */ div.head dl { margin: 1em 0; } div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; } body > .toc > li { margin-top: 1em; margin-bottom: 1em; } body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } body > .toc > li > * { margin-bottom: 0.5em; } body > .toc > li > * > li > * { margin-bottom: 0.25em; } .toc, .toc li { list-style: none; } .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } .brief li { margin: 0; padding: 0; } .brief li p { margin: 0; padding: 0; } .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } .category-list li { display: inline; } .category-list li:not(:last-child)::after { content: ', '; } .category-list li > span, .category-list li > a { text-transform: lowercase; } .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */ .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } .XXX > :first-child { margin-top: 0; } p .XXX { line-height: 3em; } .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } .annotation :link, .annotation :visited { color: inherit; } .annotation :link:hover, .annotation :visited:hover { background: transparent; } .annotation span { border: none ! important; } .note { color: green; background: transparent; font-family: sans-serif; } .warning { color: red; background: transparent; } .note, .warning { font-weight: bolder; font-style: italic; } .note em, .warning em, .note i, .warning i { font-style: normal; } p.note, div.note { padding: 0.5em 2em; } span.note { padding: 0 2em; } .note p:first-child, .warning p:first-child { margin-top: 0; } .note p:last-child, .warning p:last-child { margin-bottom: 0; } .warning:before { font-style: normal; } p.note:before { content: 'Note: '; } p.warning:before { content: '\26A0 Warning! '; } .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } .bookkeeping { font-size: 0.8em; margin: 2em 0; } .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } .bookkeeping dt { margin: 0.5em 2em 0; } .bookkeeping dd { margin: 0 3em 0.5em; } h4 { position: relative; z-index: 3; } h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } .element { background: #EEEEFF; color: black; margin: 0 0 1em 0.15em; padding: 0 1em 0.25em 0.75em; border-left: solid #9999FF 0.25em; position: relative; z-index: 1; } .element:before { position: absolute; z-index: 2; top: 0; left: -1.15em; height: 2em; width: 0.9em; background: #EEEEFF; content: ' '; border-style: none none solid solid; border-color: #9999FF; border-width: 0.25em; } .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } td > .example:only-child { margin: 0 0 0 0.1em; } ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } ul.domTree li li { list-style: none; } ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } ul.domTree span { font-style: italic; font-family: serif; } ul.domTree .t1 code { color: purple; font-weight: bold; } ul.domTree .t2 { font-style: normal; font-family: monospace; } ul.domTree .t2 .name { color: black; font-weight: bold; } ul.domTree .t2 .value { color: blue; font-weight: normal; } ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } ul.domTree .t7 code, .domTree .t8 code { color: green; } ul.domTree .t10 code { color: teal; } body.dfnEnabled dfn { cursor: pointer; } .dfnPanel { display: inline; position: absolute; z-index: 10; height: auto; width: auto; padding: 0.5em 0.75em; font: small sans-serif, Droid Sans Fallback; background: #DDDDDD; color: black; border: outset 0.2em; } .dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; } .dfnPanel :link, .dfnPanel :visited { color: black; } .dfnPanel p { font-weight: bolder; } .dfnPanel * + p { margin-top: 0.25em; } .dfnPanel li { list-style-position: inside; } #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; } #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; } #configUI p label { display: block; } #configUI #updateUI, #configUI .loginUI { text-align: center; } #configUI input[type=button] { display: block; margin: auto; } fieldset { margin: 1em; padding: 0.5em 1em; } fieldset > legend + * { margin-top: 0; } fieldset > :last-child { margin-bottom: 0; } fieldset p { margin: 0.5em 0; } </style><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><script> function getCookie(name) { var params = location.search.substr(1).split("&"); for (var index = 0; index < params.length; index++) { if (params[index] == name) return "1"; var data = params[index].split("="); if (data[0] == name) return unescape(data[1]); } var cookies = document.cookie.split("; "); for (var index = 0; index < cookies.length; index++) { var data = cookies[index].split("="); if (data[0] == name) return unescape(data[1]); } return null; } </script><link href="the-summary-element.html" rel="prev" title="4.11.2 The summary element"> <link href="index.html#contents" rel="contents" title="Table of contents"> <link href="the-menu-element.html" rel="next" title="4.11.4 The menu element"> <body class="split chapter" onload="fixBrokenLink();"><div class="head" id="head"> <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> <h1>HTML5</h1> <h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2> <h2 class="no-num no-toc" id="editor's-draft-date-1-january-1970">Editor's Draft 21 November 2012</h2> </div> <nav class="prev_next"> <a href="the-summary-element.html">&slarr; 4.11.2 The summary element</a> – <a href="index.html#contents">Table of contents</a> – <a href="the-menu-element.html">4.11.4 The menu element &srarr;</a> </nav> <h4 id="the-command-element"><span class="secno">4.11.3 </span>The <dfn id="the-command"><code>command</code></dfn> element</h4> <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="content-models.html#metadata-content-0">Metadata content</a>.</dd> <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd> <dd><a href="content-models.html#phrasing-content-1">Phrasing content</a>.</dd> <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>Where <a href="content-models.html#metadata-content-0">metadata content</a> is expected.</dd> <dd>Where <a href="content-models.html#phrasing-content-1">phrasing content</a> is expected.</dd> <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt> <dd>Empty.</dd> <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd> <dd><code title="attr-command-type"><a href="#attr-command-type">type</a></code></dd> <dd><code title="attr-command-label"><a href="#attr-command-label">label</a></code></dd> <dd><code title="attr-command-icon"><a href="#attr-command-icon">icon</a></code></dd> <dd><code title="attr-command-disabled"><a href="#attr-command-disabled">disabled</a></code></dd> <dd><code title="attr-command-checked"><a href="#attr-command-checked">checked</a></code></dd> <dd><code title="attr-command-radiogroup"><a href="#attr-command-radiogroup">radiogroup</a></code></dd>  <dd><code title="attr-command-command"><a href="#attr-command-command">command</a></code></dd> <dd>Also, the <code title="attr-command-title"><a href="#attr-command-title">title</a></code> attribute has special semantics on this element.</dd> <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt> <dd> <pre class="idl">interface <dfn id="htmlcommandelement">HTMLCommandElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { attribute DOMString <a href="#dom-command-type" title="dom-command-type">type</a>; attribute DOMString <a href="#dom-command-label" title="dom-command-label">label</a>; attribute DOMString <a href="#dom-command-icon" title="dom-command-icon">icon</a>; attribute boolean <a href="#dom-command-disabled" title="dom-command-disabled">disabled</a>; attribute boolean <a href="#dom-command-checked" title="dom-command-checked">checked</a>; attribute DOMString <a href="#dom-command-radiogroup" title="dom-command-radiogroup">radiogroup</a>; readonly attribute <a href="elements.html#htmlelement">HTMLElement</a>? <a href="#dom-command-command" title="dom-command-command">command</a>; };</pre> </dd> </dl><p>The <code><a href="#the-command-element">command</a></code> element represents a command that the user can invoke.</p> <p>A command can be explicitly part of a context menu or toolbar, using the <code><a href="the-menu-element.html#the-menu-element">menu</a></code> element. It can also be put anywhere else on a page, either just to define a keyboard shortcut, or to define a command that is then referenced from other <code><a href="#the-command-element">command</a></code> elements.</p> <p>A <code><a href="#the-command-element">command</a></code> element that uses the <code title="attr-command-type"><a href="#attr-command-type">type</a></code>, <code title="attr-command-label"><a href="#attr-command-label">label</a></code>, <code title="attr-command-icon"><a href="#attr-command-icon">icon</a></code>, <code title="attr-command-disabled"><a href="#attr-command-disabled">disabled</a></code>, <code title="attr-command-checked"><a href="#attr-command-checked">checked</a></code>, <code title="attr-command-radiogroup"><a href="#attr-command-radiogroup">radiogroup</a></code>,  and <code title="attr-title"><a href="global-attributes.html#attr-title">title</a></code> attributes defines a new command. A <code><a href="#the-command-element">command</a></code> element that uses the <code title="attr-command-command"><a href="#attr-command-command">command</a></code> <em>attribute</em> defines a command by reference to another one. This allows authors to define a command once, and set its state (e.g. whether it is active or disabled) in one place, and have all references to that command in the user interface change at the same time.</p> <hr><p>The <dfn id="attr-command-type" title="attr-command-type"><code>type</code></dfn> attribute indicates the kind of command: either a normal command with an associated action, or a state or option that can be toggled, or a selection of one item from a list of items.</p> <p>The attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a> with three keywords and states. The "<dfn id="attr-command-type-keyword-command" title="attr-command-type-keyword-command"><code>command</code></dfn>" keyword maps to the <a href="#attr-command-type-state-command" title="attr-command-type-state-command">Command</a> state, the "<dfn id="attr-command-type-keyword-checkbox" title="attr-command-type-keyword-checkbox"><code>checkbox</code></dfn>" keyword maps to the <a href="#attr-command-type-state-checkbox" title="attr-command-type-state-checkbox">Checkbox</a> state, and the "<dfn id="attr-command-type-keyword-radio" title="attr-command-type-keyword-radio"><code>radio</code></dfn>" keyword maps to the <a href="#attr-command-type-state-radio" title="attr-command-type-state-radio">Radio</a> state. The <i>missing value default</i> is the <a href="#attr-command-type-state-command" title="attr-command-type-state-command">Command</a> state.</p> <dl><dt>The <dfn id="attr-command-type-state-command" title="attr-command-type-state-command">Command</dfn> state</dt> <dd><p>The element <a href="rendering.html#represents">represents</a> a normal command with an associated action.</dd> <dt>The <dfn id="attr-command-type-state-checkbox" title="attr-command-type-state-checkbox">Checkbox</dfn> state</dt> <dd><p>The element <a href="rendering.html#represents">represents</a> a state or option that can be toggled.</dd> <dt>The <dfn id="attr-command-type-state-radio" title="attr-command-type-state-radio">Radio</dfn> state</dt> <dd><p>The element <a href="rendering.html#represents">represents</a> a selection of one item from a list of items.</dd> </dl><p>The <dfn id="attr-command-label" title="attr-command-label"><code>label</code></dfn> attribute gives the name of the command, as shown to the user. The <code title="attr-command-label"><a href="#attr-command-label">label</a></code> attribute must be specified and must have a value that is not the empty string.</p> <p>The <dfn id="attr-command-title" title="attr-command-title"><code>title</code></dfn> attribute gives a hint describing the command, which might be shown to the user to help him.</p> <p>The <dfn id="attr-command-icon" title="attr-command-icon"><code>icon</code></dfn> attribute gives a picture that represents the command. If the attribute is specified, the attribute's value must contain a <a href="urls.html#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by spaces</a>. <span class="impl">To obtain the <a href="urls.html#absolute-url">absolute URL</a> of the icon when the attribute's value is not the empty string, the attribute's value must be <a href="urls.html#resolve-a-url" title="resolve a url">resolved</a> relative to the element. When the attribute is absent, or its value is the empty string, or <a href="urls.html#resolve-a-url" title="resolve a url">resolving</a> its value fails, there is no icon.</span></p>  <p>The <dfn id="attr-command-disabled" title="attr-command-disabled"><code>disabled</code></dfn> attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a> that, if present, indicates that the command is not available in the current state.</p> <p class="note">The distinction between <code title="attr-command-disabled"><a href="#attr-command-disabled">disabled</a></code> and <code title="attr-hidden"><a href="editing.html#the-hidden-attribute">hidden</a></code> is subtle. A command would be disabled if, in the same context, it could be enabled if only certain aspects of the situation were changed. A command would be marked as hidden if, in that situation, the command will never be enabled. For example, in the context menu for a water faucet, the command "open" might be disabled if the faucet is already open, but the command "eat" would be marked hidden since the faucet could never be eaten.</p> <p>The <dfn id="attr-command-checked" title="attr-command-checked"><code>checked</code></dfn> attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a> that, if present, indicates that the command is selected. The attribute must be omitted unless the <code title="attr-command-type"><a href="#attr-command-type">type</a></code> attribute is in either the <a href="#attr-command-type-state-checkbox" title="attr-command-type-state-checkbox">Checkbox</a> state or the <a href="#attr-command-type-state-radio" title="attr-command-type-state-radio">Radio</a> state.</p> <p>The <dfn id="attr-command-radiogroup" title="attr-command-radiogroup"><code>radiogroup</code></dfn> attribute gives the name of the group of commands that will be toggled when the command itself is toggled, for commands whose <code title="attr-command-type"><a href="#attr-command-type">type</a></code> attribute has the value "<code title="">radio</code>". The scope of the name is the child list of the parent element. The attribute must be omitted unless the <code title="attr-command-type"><a href="#attr-command-type">type</a></code> attribute is in the <a href="#attr-command-type-state-radio" title="attr-command-type-state-radio">Radio</a> state.</p>  <hr><p>If a <code><a href="#the-command-element">command</a></code> element <var title="">slave</var> has a <dfn id="attr-command-command" title="attr-command-command"><code>command</code></dfn> attribute, and <var title="">slave</var> is <a href="infrastructure.html#in-a-document">in a <code>Document</code></a>, and there is an element in that <code><a href="dom.html#document">Document</a></code> whose <a href="infrastructure.html#concept-id" title="concept-id">ID</a> has a value equal to the value of <var title="">slave</var>'s <code title="attr-command-command"><a href="#attr-command-command">command</a></code> attribute, and the first such element in <a href="infrastructure.html#tree-order">tree order</a>, hereafter <var title="">master</var>, itself <a href="commands.html#concept-command" title="concept-command">defines a command</a> and either is not a <code><a href="#the-command-element">command</a></code> element or does not itself have a <code title="attr-command-command"><a href="#attr-command-command">command</a></code> attribute, then the <dfn id="master-command">master command</dfn> of <var title="">slave</var> is <var title="">master</var>.</p> <p>An element with a <code title="attr-command-command"><a href="#attr-command-command">command</a></code> attribute must have a <a href="#master-command">master command</a> and must not have any <code title="attr-command-type"><a href="#attr-command-type">type</a></code>, <code title="attr-command-label"><a href="#attr-command-label">label</a></code>, <code title="attr-command-icon"><a href="#attr-command-icon">icon</a></code>, <code title="attr-command-disabled"><a href="#attr-command-disabled">disabled</a></code>, <code title="attr-command-checked"><a href="#attr-command-checked">checked</a></code>, or <code title="attr-command-radiogroup"><a href="#attr-command-radiogroup">radiogroup</a></code> attributes.</p> <hr><div class="impl"> <p>The <dfn id="dom-command-type" title="dom-command-type"><code>type</code></dfn> IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the same name, <a href="common-dom-interfaces.html#limited-to-only-known-values">limited to only known values</a>.</p> <p>The <dfn id="dom-command-label" title="dom-command-label"><code>label</code></dfn>, <dfn id="dom-command-icon" title="dom-command-icon"><code>icon</code></dfn>, <dfn id="dom-command-disabled" title="dom-command-disabled"><code>disabled</code></dfn>, <dfn id="dom-command-checked" title="dom-command-checked"><code>checked</code></dfn>, and <dfn id="dom-command-radiogroup" title="dom-command-radiogroup"><code>radiogroup</code></dfn> IDL attributes must <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the same name.</p> <p>The <dfn id="dom-command-command" title="dom-command-command"><code>command</code></dfn> IDL attribute must return the <a href="#master-command">master command</a>, if any, or null otherwise.</p> <hr><p>If the element's <a href="commands.html#command-facet-disabledstate" title="command-facet-DisabledState">Disabled State</a> is false (enabled) then the element's <a href="content-models.html#activation-behavior">activation behavior</a> depends on the element's <code title="attr-command-type"><a href="#attr-command-type">type</a></code> and <code title="attr-command-command"><a href="#attr-command-command">command</a></code> attributes, as follows:</p> <dl class="switch"><dt>If the element has a <a href="#master-command">master command</a> set by its <code title="attr-command-command"><a href="#attr-command-command">command</a></code> attribute</dt> <dd><p>The user agent must <a href="content-models.html#run-synthetic-click-activation-steps">run synthetic click activation steps</a> on the element's <a href="#master-command">master command</a>.</dd>  <dt>If the <code title="attr-command-type"><a href="#attr-command-type">type</a></code> attribute is in the <a href="#attr-command-type-state-checkbox" title="attr-command-type-state-checkbox">Checkbox</a> state</dt> <dd><p>If the element has a <code title="attr-command-checked"><a href="#attr-command-checked">checked</a></code> attribute, the UA must remove that attribute. Otherwise, the UA must add a <code title="attr-command-checked"><a href="#attr-command-checked">checked</a></code> attribute, with the literal value <code title="">checked</code>.</dd> <dt>If the <code title="attr-command-type"><a href="#attr-command-type">type</a></code> attribute is in the <a href="#attr-command-type-state-radio" title="attr-command-type-state-radio">Radio</a> state</dt> <dd><p>If the element has a parent, then the UA must walk the list of child nodes of that parent element, and for each node that is a <code><a href="#the-command-element">command</a></code> element, if that element has a <code title="attr-command-radiogroup"><a href="#attr-command-radiogroup">radiogroup</a></code> attribute whose value exactly matches the current element's (treating missing <code title="attr-command-radiogroup"><a href="#attr-command-radiogroup">radiogroup</a></code> attributes as if they were the empty string), and has a <code title="attr-command-checked"><a href="#attr-command-checked">checked</a></code> attribute, must remove that attribute.</p> <p>Then, the element's <code title="attr-command-checked"><a href="#attr-command-checked">checked</a></code> attribute attribute must be set to the literal value <code title="">checked</code>.</dd> <dt>Otherwise</dt> <dd><p>The element's <a href="content-models.html#activation-behavior">activation behavior</a> is to do nothing.</dd> </dl><p class="note">Firing a synthetic <code title="event-click"><a href="infrastructure.html#event-click">click</a></code> event at the element does not cause any of the actions described above to happen.</p>  <p>If the element's <a href="commands.html#command-facet-disabledstate" title="command-facet-DisabledState">Disabled State</a> is true (disabled) then the element has no <a href="content-models.html#activation-behavior">activation behavior</a>.</p> </div> <p class="note"><code><a href="#the-command-element">command</a></code> elements are not rendered unless they <a href="the-menu-element.html#the-menu-element" title="menu">form part of a menu</a>.</p> <div class="example"> <p>Here is an example of a toolbar with three buttons that let the user toggle between left, center, and right alignment. One could imagine such a toolbar as part of a text editor. The toolbar also has a separator followed by another button labeled "Publish", though that button is disabled.</p> <pre><menu type="toolbar"> <command type="radio" radiogroup="alignment" checked="checked" label="Left" icon="icons/alL.png" onclick="setAlign('left')"> <command type="radio" radiogroup="alignment" label="Center" icon="icons/alC.png" onclick="setAlign('center')"> <command type="radio" radiogroup="alignment" label="Right" icon="icons/alR.png" onclick="setAlign('right')"> <hr> <command type="command" disabled label="Publish" icon="icons/pub.png" onclick="publish()"> </menu></pre> </div>