command tag in html5 with example
- A
commandis the abstraction behind menu items, buttons, and links. Once a command is defined, other parts of the interface can refer to the same command, allowing many access points to a single feature to share aspects such as the disabled state. - The command element is meant to encapsulate something that you can do. It can be rendered within a menu (since a menu presents items you can invoke).
- It provides an abstraction layer between UI and commands, so that you can make multiple UI elements refer to the same command.
- This gives you the flexibility of having one command element, rendered in a menu, that is also invoked via a URL in the middle of the page as well as a button at the bottom of the page. Disabling the command disables all access paths (url/button/menu) to the action behind the command.
- The
<command>element is meant to be an abstraction to let you refer to the same "command" from multiple menu entries or buttons. - The <command> is supported only in IE9 browser.
Example 1 :
<html>
<head><title>command tag in html5</title>
<script type="text/javascript">
function Save() {
alert("Command element in HTML5");
}
</script>
</head>
<body>
<menu>
<command id="save" onclick="Save()">Save</command>
<p><strong>Note :</strong>The command tag is only supported in IE 9 browser</p>
</menu>
<input type="button" command="save" value="Save Form" />
</body>
</html>
Demo :
In the above example, we have used command element. In the above example we have created a command named save, on click of which we are calling javascript save method. Being an abstraction, the command element can be invoked from other controls. In above example, button element refers the command element using its id attribute. When you will click "Save Form" button it will call Save() method defined in command element.
Imp Point :
If you disable the command element using:
document.getElementById('doThat').disabled=true;In disabling the command element using above code, it would disable all the controls referring to this command element.
ReplyDeleteNice blog Very useful information is providing by ur blog. Great beginning html tutorials Very clear and helpful for beginners.