Elemento button (type=menu)

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento button, teniendo el valor "menu" en su atributo type, crea un botón de menú que cuando es usado en una combinación específica con otros elementos (menu, li y menuitem) puede colaborar en la creación de menús estilo barra de herramientas.

El soporte provisto por los navegadores para los botones de menú, y para menús de barras de herramientas en general, es muy bajo. Los autores pueden tener que recurrir a programas del lado cliente para proveer esta funcionalidad consistentemente, hasta que el soporte crezca.

Ejemplos

La estructura de elementos necesaria para crear un menú de barra de herramientas es muy específica y será tratada en el siguiente ejemplo. Para proveer un menú de barra de herramientas necesitas declarar básicamente un elemento menu que contenga un elemento li para cada opción principal en el menú. Luego, cada uno de estos elementos li será el contenedor para el submenú, que se compondrá de un botón de menú (que actuará de alguna manera como título) y un elemento menu con todas las opciones (elementos menuitem) que el submenú proveerá.

En este ejemplo imitaremos al menú de los editores de texto clásicos, donde la barra con los menús "Archivo", "Editar" y "Ayuda" resultará familiar para todos. Esto puede ayudar a comprender mejor como esta estructura, más bien compleja, debe ser construida.

Las funciones declaradas en el siguiente ejemplo (en los atributos onclick) no están pensadas para funcionar. Este ejemplo apunta únicamente a probar la funcionalidad provista por los navegadores para los menús de barras de herramientas.

<menu>
  <li>
    <button type="menu" value="Archivo" menu="menuarchivo">
    <menu id="menuarchivo" type="context">
      <menuitem label="Nuevo..." onclick="nuevo()">
      <menuitem label="Abrir..." onclick="abrir()">
      <menuitem label="Guardar" onclick="guardar()">
      <menuitem label="Guardar como..." onclick="guardarcomo()">
    </menu>
  </li>
  <li>
    <button type="menu" value="Editar" menu="menueditar">
    <menu id="menueditar" type="context">
      <menuitem label="Copiar" onclick="copiar()">
      <menuitem label="Cortar" onclick="cortar()">
      <menuitem label="Pegar" onclick="pegar()">
    </menu>
  </li>
  <li>
    <button type="menu" value="Ayuda" menu="menuayuda">
    <menu id="menuayuda" type="context">
      <menuitem label="Contenidos de ayuda" onclick="contenidosayuda()">
      <menuitem label="Acerca" onclick="acerca()">
    </menu>
  </li>
</menu>
  • Cuatro cosas deben tenerse en cuenta en el ejemplo anterior:

    1. Cada botón de menú tiene su atributo menu establecido en corcondancia con el atributo id del menu con el cual está asociado.
    2. El atributo value en los botones de menú es la etiqueta de cada submenú.
    3. El atributo type en todos los elementos menu que representan un submenú, tienen el valor "context".
    4. Estando ausente, el atributo type del elemento menu más exterior toma el valor por defecto "toolbar" (sólo cuando el menu no es hijo de otro menu contextual).

    Atributos

    Atributos específicos

    autofocus

    Un valor booleano que instruye al navegador a establecer el enfoque sobre este control cuando el documento termina de cargarse o cuando el cuadro de diálogo (dialog) donde el control se encuentra es mostrado. Si el atributo tiene el valor "autofocus" o la cadena vacía (""), o si simplemente está presente, el control debería obtener el enfoque tan pronto como sea posible, luego de que la página o cuadro de diálogo hayan sido cargados.

    Ejemplo

    <button type="menu" label="Archivo" autofocus>
    

    disabled

    Un valor booleano que indica si el control se encuentra deshabilitado o no. Si el atributo toma el valor "disabled" o la cadena vacía (""), o si está simplemente presente, el control estará deshabilitado.

    Los controles deshabilitados son representados en color gris (si son visibles), son impedidos para interactuar con el usuario y, lo más importante, sus valores (si lo tienen) no son enviados cuando el formulario es despachado.

    Ejemplo

    <menu>
      <li>
        <button type="menu" value="Gráficos" menu="menugraficos" disabled>
        <menu id="menugraficos" type="context">
          <menuitem label="Agregar..." onclick="agregarGrafico()">
          <menuitem label="Representar..." onclick="representarGrafico()">
        </menu>
      </li>
    </menu>
    
  • form

    El valor del atributo id del formulario con el que este control está asociado.

    Este atributo es nuevo en HTML5 y ayuda a definir la pertenencia de los controles en formularios anidados o distantes.

    Ejemplo

    <button type="menu" label="Archivo" form="formulario1">
    

    menu

    Un identificador que concuerda con el valor del atributo id del menu contextual con el que este elemento esta asociado.

    Actualmente, el valor isindex, antiguamente utilizado de manera especial por algunos navegadores e incluido en el estándar HTML, no está permitido en este atributo.

    Un elemento menu que está asociado con un botón de menú, sólo puede tener el valor "context" como contenido de su atributo type.

    Las funciones declaradas en el siguiente ejemplo (en los atributos onclick) no están pensadas para funcionar. Este ejemplo apunta únicamente a probar la funcionalidad provista por los navegadores para los menús de barras de herramientas.

    Ejemplo

    <menu>
      <li>
        <button type="menu" value="Buscar" menu="menubuscar">
        <menu id="menubuscar" type="context">
          <menuitem label="Archivos..." onclick="buscararchivos()">
          <menuitem label="Directorios..." onclick="buscardirectorios()">
        </menu>
      </li>
    </menu>
    
  • name

    Un nombre para el control. Este nombre será enviado por el navegador al agente procesador, emparejado con el contenido del atributo value. Ambos atributos juntos conformarán un par nombre-valor que será utilizado para procesar la información del formulario.

    El par nombre-valor de un botón es enviado, con el resto de los datos en el formulario, sólo si el botón ha sido utilizado para enviar el formulario.

    Ejemplo

    <button type="menu" name="menuarchivo">
    

    type

    Un valor que indica la conducta esperada del botón. Existen cuatro valores posibles (insensibles a mayúsculas/minúsculas) que decidirán la acción predeterminada que llevará a cabo el botón cuando sea presionado:

    • button: ninguna acción es asociada al control. La conducta de este tipo de botones es habitualmente provista por programas.
    • reset: los controles del formulario asociado son restaurados a sus valores iniciales.
    • submit: el formulario asociado es enviado. Este es el valor por defecto.
    • menu: el menú contextual asociado a este botón es desplegado.

    Cuando este atributo no está presente, el botón se comporta como si el atributo tuviera el valor "submit".

    Ejemplo

    <button type="submit">Submit data</button>
    

    value

    Un valor para el control. Este valor será enviado por el navegador al agente procesador, emparejado con el contenido del atributo name. Ambos atributos juntos conformarán un par nombre-valor que será utilizado para procesar la información del formulario.

    En un botón de menú, el contenido de este atributo representa la etiqueta del botón de menú o, en otras palabras, la etiqueta del submenú desplegado cuando éste es presionado.

    El par nombre-valor de un botón es enviado, con el resto de los datos en el formulario, sólo si el botón ha sido utilizado para enviar el formulario.

    Las funciones declaradas en el siguiente ejemplo (en los atributos onclick) no están pensadas para funcionar. Este ejemplo apunta únicamente a probar la funcionalidad provista por los navegadores para los menús de barras de herramientas.

    Ejemplo

    <menu>
      <li>
        <button type="menu" value="Base de datos" menu="menubd">
        <menu id="menubd" type="context">
          <menuitem label="Buscar..." onclick="buscarBD()">
          <menuitem label="Insertar..." onclick="insertarBD()">
        </menu>
      </li>
    </menu>
    
  • Atributos globales

    Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

    Eventos

    Eventos globales

    Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.