button (type=menu) element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The button element, having the "menu" value in its type attribute, creates a menu button that when used in a specific combination with other elements (menu, li and menuitem) can aid in the creation of toolbar-type menus.

Browser support for menu buttons, and for toolbar menus in general, is very low. Authors may need to rely on client-side scripts to provide this functionality cross-browser, until support grows.

Examples

The elements structure to create a toolbar menu is very specific and will be treated in the following example. For providing a toolbar menu you basically need to declare a menu element containing one li element for each main option in the menu. Then, each of these li elements will be the container for the sub-menu, consisting of a menu button (acting somehow as title or caption) and a menu element with all the options (menuitem elements) the sub-menu will provide.

In this example we're imitating the menu in a classical text editor, where the bar with the menus "File", "Edit" and "Help" will be familiar to everyone. This may aid to better understand how this rather complex structure must be put toghether.

The functions declared in the following example (in the onclick attributes) aren't meant to work. This example aims only to test the functionality provided by browsers for toolbar menus.

<menu>
  <li>
    <button type="menu" value="File" menu="filemenu">
    <menu id="filemenu" type="context">
      <menuitem label="New..." onclick="new()">
      <menuitem label="Open..." onclick="open()">
      <menuitem label="Save" onclick="save()">
      <menuitem label="Save as..." onclick="saveas()">
    </menu>
  </li>
  <li>
    <button type="menu" value="Edit" menu="editmenu">
    <menu id="editmenu" type="context">
      <menuitem label="Copy" onclick="copy()">
      <menuitem label="Cut" onclick="cut()">
      <menuitem label="Paste" onclick="paste()">
    </menu>
  </li>
  <li>
    <button type="menu" value="Help" menu="helpmenu">
    <menu id="helpmenu" type="context">
      <menuitem label="Help contents" onclick="helpcontents()">
      <menuitem label="About" onclick="about()">
    </menu>
  </li>
</menu>
  • Four things must be taken into account in the previous example:

    1. Each menu button has its menu attribute set to match the id attribute of the menu it's associated with.
    2. The value attribute in the menu buttons is the label of each sub-menu.
    3. The type attribute in every menu element representing a sub-menu, has always the value "context".
    4. Being absent, the type attribute in the outermost menu element defaults to "toolbar" (only when the menu isn't child of another context menu).

    Attributes

    Specific attributes

    autofocus

    A boolean value instructing the browser to set the focus to this control when the document has finished loading or when the dialog where the control finds itself is shown. If the attribute has the value "autofocus" or the empty string (""), or if it's just present, the control should get the focus as soon as possible, after the page or dialog has been loaded.

    Example

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

    disabled

    A boolean value indicating wether the control is disabled or not. If the attribute takes the value "disabled" or the empty string (""), or if it's just present, the control will be disabled.

    Disabled controls are rendered greyed out (if visible), are blocked from user interaction and, more importantly, their values (if any) aren't sent when the form is submitted.

    Example

    <menu>
      <li>
        <button type="menu" value="Graphics" menu="graphicsmenu" disabled>
        <menu id="graphicsmenu" type="context">
          <menuitem label="Add..." onclick="addGraph()">
          <menuitem label="Render..." onclick="renderGraph()">
        </menu>
      </li>
    </menu>
    
  • form

    The value of the id attribute of the form with which this control is associated to.

    This attribute is new in HTML5 and helps defining the pertenence of controls in nested or distant forms.

    Example

    <button type="menu" label="File" form="form1">
    

    menu

    A token matching the value of the id attribute in the context menu this element is associated with.

    A menu element that's associated with a menu button, can only have the value "context" as content of its type attribute.

    The functions declared in the following example aren't meant to work. This example aims only to test the functionality provided by browsers for toolbar menus.

    Example

    <menu>
      <li>
        <button type="menu" value="Search" menu="searchmenu">
        <menu id="searchmenu" type="context">
          <menuitem label="Files..." onclick="searchfiles()">
          <menuitem label="Directories..." onclick="searchdirectories()">
        </menu>
      </li>
    </menu>
    
  • name

    A name for the control. This name will be sent by the browser to the processing agent, paired with the content of the value attribute. Both attributes together will conform a name-value pair that will be used to process the form data.

    Currently, the value isindex, formerly used in a special way by some browsers and included in the HTML standard, isn't permitted in this attribute.

    The name-value pair of a button is submitted, with the other form data, only if the button has been used to submit the form.

    Example

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

    type

    A value indicating the expected behavior of the button. There are four possible values (case-insensitive) that will decide the default action carried out by the button when it's pressed:

    • button: there's no default action associated to the control. The behavior of this type of buttons is usually provided by a script.
    • reset: the controls of the associated form are reset to their initial values.
    • submit: the associated form is submitted. This is the deafult value.
    • menu: the context menu associated to this button is deployed.

    When this attribute isn't present, the button behaves as a "submit" button.

    Example

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

    value

    A value for the control. This value will be sent by the browser to the processing agent, paired with the content of the name attribute. Both attributes together will conform a name-value pair that will be used to process the form data.

    In a menu button, the content of this attribute represents the label of the button or, in other words, the label of the sub-menu deployed when it's clicked.

    The name-value pair of a button is submitted, with the other form data, only if the button has been used to submit the form.

    The functions declared in the following example aren't meant to work. This example aims only to test the functionality provided by browsers for toolbar menus.

    Example

    <menu>
      <li>
        <button type="menu" value="Database" menu="dbmenu">
        <menu id="dbmenu" type="context">
          <menuitem label="Search..." onclick="searchDB()">
          <menuitem label="Insert..." onclick="insertDB()">
        </menu>
      </li>
    </menu>
    
  • Global attributes

    For information about global attributes refer to this list of global attributes in HTML5.

    Events

    Global events

    For information about global events refer to this list of global events in HTML5.