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.