Versão Impressão

HTML5

Um guia de referência para os desenvolvedores web.

18. Menus e toolbars

O elemento menu

O elemento menu é usado para definir menus e barras de ferramenta. Dentro do menu, você pode inserir submenus ou comandos. Para inserir submenus, basta inserir outros elementos menu. Para definir comandos, você pode inserir:

  1. Um link, um elemento a com atributo href;
  2. Um botão, um elemento button;
  3. Um botão, um elemento input com o atributo type contendo button, submit, reset ou image;
  4. Um radiobutton, um elemento input com o atributo type contendo radio;
  5. Um checkbox, um elemento input com o atributo type contendo checkbox;
  6. Um elemento select, contendo um ou mais options, define um grupo de comandos
  7. Um elemento qualquer com o atributo accesskey
  8. Um elemento command

Tipos de comando

Há três tipos de comando:

command
Uma ação comum;
checkbox
Uma ação que pode estar no status de ligada ou desligada, e alterna entre esses dois stauts quando clicada;
radio
Uma ação que pode estar no status de ligada ou desligada, e quando clicada vai para o status de ligada, deligando todas as ações com o mesmo valor no atributo radiogroup;

Da lista de elementos possíveis para definir comandos, os três primeiros, link, button e input button, definem comandos do tipo command. O quarto elemento, radiobutton, define um comando do tipo radio. O quinto, checkbox, define um comando do tipo checkbox.

O sexto elemento, o select, vai definir um grupo de comandos. Se o select tiver o atributo multiple, definirá uma lista de comandos do tipo checkbox. Caso contrário, os comandos serão do tipo radio, tendo o mesmo radiogroup.

No sétimo caso, um elemento qualquer com tecla de acesso, o tipo de comando vai depender do tipo de elemento que recebeu accesskey.

O elemento command

Por fim, temos o oitavo método, o elemento command. Neste caso o tipo de comando dependerá do valor do atributo type. Veja um exemplo de como usá-lo:

<command type="command" label="Salvar" onclick="salvar()" >

Prefira não usar command, por enquanto

Por que a especificação permite que se use o novo elemento command para definir comandos, e ao mesmo tempo permite que se use os velhos elementos como input, button e select para isso? Para possibilitar ao desenvolvedor oferecer alguma compatibilidade com navegadores antigos. Veja este exemplo:

Arquivo: exemplos/18/command.html

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="UTF-8" />
  5 <title>Menus</title>
  6 </head>
  7 
  8 <body>
  9 
 10 <menu type="toolbar">
 11   <li>
 12     <menu label="File">
 13       <button type="button" onclick="fnew()">New...</button>
 14       <button type="button" onclick="fopen()">Open...</button>
 15       <button type="button" onclick="fsave()">Save</button>
 16       <button type="button" onclick="fsaveas()">Save as...</button>
 17     </menu>
 18   </li>
 19   <li>
 20     <menu label="Edit">
 21       <button type="button" onclick="ecopy()">Copy</button>
 22       <button type="button" onclick="ecut()">Cut</button>
 23       <button type="button" onclick="epaste()">Paste</button>
 24     </menu>
 25   </li>
 26   <li>
 27     <menu label="Help">
 28       <li><a href="help.html">Help</a></li>
 29       <li><a href="about.html">About</a></li>
 30     </menu>
 31   </li>
 32 </menu>
 33 
 34 </body>
 35 
 36 </html>

O agente de usuário deveria renderizar algo como:

Exemplo de menu

Um agente de usuário que não conhece o novo elemento menu vai entender esse código como listas aninhadas com botões e links. E vai renderizar isso assim:

Exemplo de menu

Não está bonito, mas é perfeitamente acessível. E o visual pode ser bem trabalhado com CSS. A mesma coisa poderia ser escrita com o elemento command:

Arquivo: exemplos/18/command2.html

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="UTF-8" />
  5 <title>Menus</title>
  6 </head>
  7 
  8 <body>
  9 
 10 <menu type="toolbar">
 11   <menu label="File">
 12     <command onclick="fnew()" label="New..." />
 13     <command onclick="fopen()" label="Open..." />
 14     <command onclick="fsave()" label="Save" />
 15     <command onclick="fsaveas()" label="Save as..." />
 16   </menu>
 17   <menu label="Edit">
 18     <command onclick="ecopy()" label="Copy" />
 19     <command onclick="ecut()" label="Cut" />
 20     <command onclick="epaste()" label="Paste" />
 21   </menu>
 22   <menu label="Help">
 23     <command onclick="location='help.html'" label="Help" />
 24     <command onclick="location='about.html'" label="About" />
 25   </menu>
 26 </menu>
 27 
 28 </body>
 29 
 30 </html>

Mas um agente de usuário que não conhece os elementos menu e command não vai mostrar absolutamente nada.