Introduction
HTML5 provides web developers a new way to represent commands which need to be executed. This support comes in the form of the “command” markup element.
The HTML5 specification describes command as an abstraction behind UI elements like menu items, buttons and links (http://www.w3.org/TR/html51/interactive-elements.html#commands).
Once defined, the command can be reused across controls allowing reusability of frequently used logic.
The “command” markup element has a “type” attribute which can take one of the following values:
- “command”, which is used for regular purpose
- “radio”, which indicates that invoking the command will set the Checked State attribute (“checked”) to true.
- “checkbox”, which indicates that invoking the command will flip (toggle) the Checked State attribute (“checked”)
Another attribute on the “command” markup element is the “action” which indicates the effect of invoking the command will have.
Let us look at how a command markup element is declared in HTML5.
A simple command element of type “command” can be declared as under:
<command type=”command” label=”click” onclick=”click()”>Click the command
</command>
We can see that in the above declaration that the command element is declared like a button element.
A command of type “radio” can be declared under a container element like “menu” as under:
<menu type=”toolbar”>
<command type=”radio” radiogroup=”alignment” checked=”checked” label=”Left” icon=”left.png” onclick=”setAlign(‘left’)” />
</menu>
We can see in the above declaration that the command markup element has a checked and radiogroup attributes (which are typically associated with radio elements).
Browser Support
Today, no major browser supports the command markup element, hence we cannot see the command markup element in action.
Sample web page using command markup element
Here is a sample HTML5 web page which uses the command markup element.
<!DOCTYPE html>
<html>
<meta charset=”utf-8″>
<title>Command sample</title>
<body>
<command type=”command” label=”click” onclick=”click()”>Click the command</command>
<menu type=”toolbar”>
<command type=”radio” radiogroup=”alignment” checked=”checked” label=”Left” icon=”left.png” onclick=”setAlign(‘left’)” />
</menu>
<article>
<header>
<h1>Command sample</h1>
<p>Demo showing command markup element in HTML5</p>
</header>
<footer>
<h1></h1>
<p>HTML Goodies</p>
</footer>
</article>
<script type=”text/javascript”>
function click()
{
alert(“You have clicked me”);
}
</script>
</body>
</html>
In the above example, we have two instances of the command markup element, one of the command type and the other of the radiobutton type.
Because of the lack of support for command markup element in any of the mainstream, browsers, we have to wait to test this out.
Commands can be used without an id attribute, but in that case, they are anonymous commands.
The following HTML5 elements can be used to define a command:
- “a” element
- “button” element
- “input” element
- “option” element
- “menuitem” element
- “accesskey” attribute on “label” element
- “accesskey” attribute on “legend” element
If the command element does not have a defined activation behavior, the “click” event is invoked as the “Action” of the command.
Summary
In this article, we learned about the basics of the “command” markup element. You can download a copy of the sample code from <download link>.
