Un bouton pouvant être pressé par l'utilisateur.

<button label="Save" accesskey="S"/>

• Plus d'information sur l'élément bouton.
• Référence de la balise Button

Un bouton ayant un menu déroulant attaché. Appuyez sur le bouton pour ouvrir le menu.

<button type="menu" label="View">
  <menupopup>
    <menuitem label="List"/>
    <menuitem label="Details"/>
  </menupopup>
</button>

• Plus d'information à propos de ce type d'élement bouton.
• Référence de la balise Button
• Eléments connexes : menupopup menuitem

Un bouton associé à un bouton-flèche qui ouvre un menu déroulant. Le bouton-flèche est séparé du bouton principal. Contrairement au le type 'menu', des actions différentes peuvent être effectués en cliquant sur le bouton ou sur le bouton-flèche.

<button type="menu-button" label="New">
  <menupopup>
    <menuitem label="New Document"/>
    <menuitem label="New Image"/>
  </menupopup>
</button>

• Plus d'information à propos de ce type d'élément bouton.
• Référence de la balise Button
• Eléments connexes : menupopup menuitem

Un contrôle pouvant être coché ou non ; typiquement utilisé pour créer des options pouvant être activées ou désactivées.

<checkbox label="Show Toolbar Labels" checked="true"/>

• Plus d'information à propos de cette case à cocher.
• Référence à la balise Checkbox

Un sélectionneur de couleurs pouvant être utilisé pour sélectionner une couleur.

<colorpicker color="#FF0000"/>

• Colorpicker Reference

Un bouton qui affiche la couleur sélectionnée. Lorsqu'on clique sur le bouton, un sélecteur de couleurs spécialisé s'affiche.

<colorpicker type="button" color="#CC0080"/>

• Colorpicker Reference

Nouveau dans Firefox 3

Une série de boîtes de texte qui peuvent être utilisées pour saisir une date.

<datepicker value="2007/03/26"/>

• Datepicker Reference

Nouveau dans Firefox 3

Un sélecteur de date qui affiche un calendrier pour la sélection.

<datepicker type="grid" value="2007/02/20"/>

• Datepicker Reference

Nouveau dans Firefox 3

Un sélecteur de date qui affiche une série de boîtes de texte pour la saisie et un bouton pour afficher un sélecteur de date sous forme de calendrier.

<datepicker type="popup" value="2008/08/24"/>

• Datepicker Reference

L'élément description permet d'ajouter un texte descriptif.

<description>
  Sélectionner l'heure du début de l'évènement
</description>

• Plus d'information à propos de l'élément description.
• Description Reference

Un élément groupbox regroupe plusieurs contrôles d'interface usager et affiche une étiquette à l'aide de l'élément caption.

<groupbox>
  <caption label="Network"/>
</groupbox>

• Plus d'information à propos de l'élément groupbox.
• Groupbox Reference
• Related Elements: caption

Une image spécifiée par une URL.

<image src="start.png"/>

• Plus d'information à propos de l'élément image.
• Image Reference

L'élément label permet d'ajouter une étiquette à côté d'un champ de saisie.

<label control="volume" value="Volume:"/>

• Plus d'information à propos de l'élément label.
• Label Reference

Une liste permet la sélection d'items textuels.

<listbox>
  <listitem label="Chocolat"/>
  <listitem label="Bonbon"/>
</listbox>

• Plus d'information à propos de l'élément listbox.
• Listbox Reference
• Related Elements: listcell listcols listcol listhead listheader listitem

Une zone combinée est un contrôle texte attaché à une liste déroulante. La valeur est sélectionnée à l'aide de la liste déroulante. Aussi connu sous les noms de menulist, combobox et <select> en HTML.

<menulist>
  <menupopup>
    <menuitem label="Lions" value="l"/>
    <menuitem label="Tigres" value="t"/>
    <menuitem label="Ours" value="o"/>
  </menupopup>
</menulist>

• Plus d'information à propos de l'élément menulist.
• Menulist Reference
• Éléments reliés: menupopup menuitem

An editable menulist is like a standard menulist except that the selected value is displayed in a textbox where it may be modified directly or values not in the popup list may be entered.

<menulist editable="true">
  <menupopup>
    <menuitem label="Elephants" value="Elephants"/>
    <menuitem label="Kangaroos" value="Kangaroos"/>
    <menuitem label="Bats" value="Bats"/>
  </menupopup>
</menulist>

• More information about the editable menulist element.
• Menulist Reference
• Éléments reliés: menupopup menuitem

A progress meter is used to display the progress of a lengthy task.

<progressmeter value="40"/>

• More information about the progressmeter element.
• Progressmeter Reference

A radio button is used when only one of a set of options may be selected at a time.

<radiogroup>
  <radio label="Light" value="light"/>
  <radio label="Heavy" value="heavy"/>
</radiogroup>

• More information about the radio element.
• Radio Reference
• Éléments reliés: radiogroup

The richlistbox displays a list of items where one or more may selected. Unlike the listbox which is designed to display only text, the richlistbox may display any type of content.

<richlistbox>
  <richlistitem>
    <image src="happy.png"/>
  </richlistitem>
  <richlistitem>
    <image src="sad.png"/>
  </richlistitem>
  <richlistitem>
    <image src="angry.png"/>
  </richlistitem>
</richlistbox>

• Richlistbox Reference
• Éléments reliés: richlistitem

Nouveau dans Firefox 3

A scale displays a bar with a thumb that may be slid across the bar to select between a range of values.

<scale min="1" max="10"/>

• Scale Reference

A textbox which allows a single line of text to be entered.

<textbox value="firefox"/>

• More information about the textbox element.
• Textbox Reference

A textbox which allows multiple lines of text to be entered.

<textbox multiline="true"/>

• More information about the multiple line textbox element.
• Textbox Reference

A textbox which provides a dropdown showing matches that would complete what the user types. The user can select one to have it filled into the textbox.

<textbox type="autocomplete" autocompletesearch="history"/>

• Textbox Reference

Nouveau dans Firefox 3

A textbox for entering numbers. Two arrow buttons are displayed for cycling through values.

<textbox type="number" min="1" max="20"/>

• Textbox Reference

A textbox that hides the characters typed, used for entering passwords.

<textbox type="password"/>

• Textbox Reference

Nouveau dans Firefox 3

A timepicker displays a set of textboxes for entering a time.

<timepicker value="12:05"/>

• Timepicker Reference

A button that is displayed on a toolbar.

<toolbarbutton label="Reload"/>

• More information about the toolbarbutton element.
• Toolbarbutton Reference
• Related Elements: toolbar

A button that is displayed on a toolbar with a drop down menu attached to it.

<toolbarbutton type="menu" label="Show">
  <menupopup>
    <menuitem label="Toolbars"/>
    <menuitem label="Status Bar"/>
  </menupopup>
</toolbarbutton>

• More information about this type of menu toolbarbutton element.
• Toolbarbutton Reference
• Related Elements: menupopup menuitem toolbar

A button on a toolbar that that has a separate arrow button with a menu attached to it. Unlike with the 'menu' type, a separate action may be performed when the main part of the button is pressed.

<toolbarbutton type="menu-button" label="Open">
  <menupopup>
    <menuitem label="Open Changed Files"/>
    <menuitem label="Open All"/>
  </menupopup>
</toolbarbutton>

• More information about this type of menu toolbarbutton element.
• Toolbarbutton Reference
• Related Elements: menupopup menuitem toolbar

A tree displays a hierarchy of items in multiple columns.

<tree>
  <treecols>
    <treecol label="Name" flex="1"/>
    <treecol label="Size" flex="1"/>
  </treecols>
  <treechildren>
    <treeitem>
      <treerow>
        <treecell label="Popcorn"/>
        <treecell label="Large"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell label="Root Beer"/>
        <treecell label="Small"/>
      </treerow>
    </treeitem>
  </treechildren>
</tree>

• More information about the tree element.
• Tree Reference
• Related Elements: treecell treechildren treecol treecols treeitem treerow