The experiment

One of the new elements within HTML5 is the <command> element. This defines a command button that represents a command that the user can invoke. I'm going to take a quick look at this new element.

Unfortunately none of the major browsers support the <command> element at the time of writing. I will still provide a test page that can be used in the event of one of the browsers finally getting around to it, and I will also update this experiment when that happens. Until then, you'll just have to believe what I write!

The process

As usual, to begin with, let's take a look at the element itself and it's various attributes:

• type — indicates the kind of command that belongs to this element. It's either a normal command with an associated action, or a state, or option that can be toggled, or a selection of a particular item from a list of items. There are three different states:
  • command — represents a normal command with an associated action
  • checkbox — represents a state or an option that can be toggled
  • radio — indicates the selection of a particular item from a list of items
  If type is not set, then it defaults to command.
• label — indicates the name of the comment that is to be shown to the user
• title — supplies a hint to the command to the user
• icon — provides a picture that represents the command. Must contain a valid URL
• disabled — boolean attribute that, if present, indicates that the command is not currently available
• checked — boolean attribute that, if present, indicates that the command is selected. Has no affect if the type attribute is command and in this case should be left out altogether
• radiogroup — supplies the name of the group of commands that will be toggled when the command itself is toggled. Applicable when the type is set to radio only

All <command> elements must be contained within a <menu> element, or they will not be displayed. Also, this element is a void element and thus has no closing tag.

With this in mind, let's take a look at an example of how this element may be used to create a radio button list of fruits:

<menu label="Fruit List">
   <command type="radio" radiogroup="fruitlist" label="Apple">
   <command type="radio" radiogroup="fruitlist" label="Orange">
   <command type="radio" radiogroup="fruitlist" label="Banana">
</menu>

With this list, there is no default option checked (it wouldn't make sense with this example). All the options belong to the same radiogroup: fruitlist. This radiogroup name can then be used for obtaining the chosen value (in the same way as the name field is currently used on an input element of type radio. This is currently conjecture though as I cannnot test it).

Similarily, a check list of fruits can be created as follows:

<menu label="Fruit Check List">
   <command type="checkbox" label="Apple">
   <command type="checkbox" label="Orange">
   <command type="checkbox" label="Banana">
</menu>

Again conjecture points to this being used in the same way as an input type of checkbox.

The results

Unfortunately, the results are disappointing, simply because I am currently unable to see how the various browsers render this element. The test page that I have created, simply displays the page header and section headers and nothing more.

Naturally I will update this experiment when this changes, so please do let me know if you become aware of a browser that renders it!

But for now, I provided two simple examples of how the <command> element may be used, although I suspect in reality it will be much more useful than the examples given here.

Watch this space!