path: root/files/fr/archive/mozilla/xul/les_contrôles_xul/index.html

---
title: Les contrôles XUL
slug: Archive/Mozilla/XUL/Les_contrôles_XUL
tags:
  - XUL
translation_of: Archive/Mozilla/XUL/XUL_controls
---
<p>Le tableau suivant propose le listing des contrôles utilisateurs mis à disposition par <a href="/fr/XUL" title="fr/XUL">XUL</a>. Reportez-vous à la section <a href="/fr/Tutoriel_XUL" title="fr/Tutoriel_XUL">Tutoriel XUL</a> pour un guide pas-à-pas sur leurs utilisations et <a href="/fr/Référence_XUL" title="fr/Référence_XUL">Référence XUL</a> pour les informations de référence.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td><strong>&lt;button&gt;</strong>

    <p>Un bouton pouvant être pressé par l'utilisateur.</p>

    <pre class="eval">
&lt;button label="Save" accesskey="S"/&gt;
</pre>

    <p> </p>

    <ul>
     <li><a href="/fr/XUL_Tutorial/Adding_Buttons" title="fr/XUL_Tutorial/Adding_Buttons">Plus d'information sur l'élément bouton</a>.</li>
     <li><a href="/fr/XUL/button" title="fr/XUL/button">Référence de la balise Button</a></li>
    </ul>
   </td>
   <td><img alt="Image:Controlsguide-button.png" class="internal" src="/@api/deki/files/1257/=Controlsguide-button.png"></td>
  </tr>
  <tr>
   <td><strong>&lt;button type="menu"&gt;</strong>
    <p>Un bouton ayant un menu déroulant attaché. Appuyez sur le bouton pour ouvrir le menu.</p>

    <pre class="eval">
&lt;button type="menu" label="View"&gt;
  &lt;menupopup&gt;
    &lt;menuitem label="List"/&gt;
    &lt;menuitem label="Details"/&gt;
  &lt;/menupopup&gt;
&lt;/button&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL_Tutorial/More_Button_Features#Button_with_menupopup" title="fr/XUL_Tutorial/More_Button_Features#Button_with_menupopup">Plus d'information à propos de ce type d'élement bouton</a>.</li>
     <li><a href="/fr/XUL/button" title="fr/XUL/button">Référence de la balise Button</a></li>
     <li>Eléments connexes : <code><a href="/fr/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> <code><a href="/fr/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></li>
    </ul>
   </td>
   <td><img alt="Image:Controlsguide-button-menu.png" class="internal" src="/@api/deki/files/1256/=Controlsguide-button-menu.png"></td>
  </tr>
  <tr>
   <td><strong>&lt;button type="menu-button"&gt;</strong>
    <p>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 '<code>menu</code>', des actions différentes peuvent être effectués en cliquant sur le bouton ou sur le bouton-flèche.</p>

    <pre class="eval">
&lt;button type="menu-button" label="New"&gt;
  &lt;menupopup&gt;
    &lt;menuitem label="New Document"/&gt;
    &lt;menuitem label="New Image"/&gt;
  &lt;/menupopup&gt;
&lt;/button&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL_Tutorial/More_Button_Features#Button_with_menupopup" title="fr/XUL_Tutorial/More_Button_Features#Button_with_menupopup">Plus d'information à propos de ce type d'élément bouton</a>.</li>
     <li><a href="/fr/XUL/button" title="fr/XUL/button">Référence de la balise Button</a></li>
     <li>Eléments connexes : <code><a href="/fr/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> <code><a href="/fr/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></li>
    </ul>
   </td>
   <td><img alt="Image:Controlsguide-button-menu-button.gif"></td>
  </tr>
  <tr>
   <td><strong>&lt;checkbox&gt;</strong>
    <p>Un contrôle pouvant être coché ou non ; typiquement utilisé pour créer des options pouvant être activées ou désactivées.</p>

    <pre class="eval">
&lt;checkbox label="Show Toolbar Labels" checked="true"/&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Elements" title="fr/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Elements">Plus d'information à propos de cette case à cocher</a>.</li>
     <li><a href="/fr/XUL/checkbox" title="fr/XUL/checkbox">Référence à la balise Checkbox</a></li>
    </ul>
   </td>
   <td><img alt="Image:Controlsguide-checkbox.png" class="internal" src="/@api/deki/files/1258/=Controlsguide-checkbox.png"></td>
  </tr>
  <tr>
   <td><strong>&lt;colorpicker&gt;</strong>
    <p>Un sélectionneur de couleurs pouvant être utilisé pour sélectionner une couleur.</p>

    <pre class="eval">
&lt;colorpicker color="#FF0000"/&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL/colorpicker" title="fr/XUL/colorpicker">Colorpicker Reference</a></li>
    </ul>
   </td>
   <td><span class="comment">Image:Controlsguide-colorpicker.png</span></td>
  </tr>
  <tr>
   <td><strong>&lt;colorpicker type="button"&gt;</strong>
    <p>Un bouton qui affiche la couleur sélectionnée. Lorsqu'on clique sur le bouton, un sélecteur de couleurs spécialisé s'affiche.</p>

    <pre class="eval">
&lt;colorpicker type="button" color="#CC0080"/&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL/colorpicker" title="fr/XUL/colorpicker">Colorpicker Reference</a></li>
    </ul>
   </td>
   <td><img alt="Image:Controlsguide-colorpicker-button.png" class="internal" src="/@api/deki/files/1259/=Controlsguide-colorpicker-button.png"></td>
  </tr>
  <tr>
   <td><strong>&lt;datepicker&gt;</strong>


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

    <pre class="eval">
&lt;datepicker value="2007/03/26"/&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL/datepicker" title="fr/XUL/datepicker">Datepicker Reference</a></li>
    </ul>
   </td>
   <td><img alt="Image:Controlsguide-datepicker.png" class="internal" src="/@api/deki/files/1261/=Controlsguide-datepicker.png"></td>
  </tr>
  <tr>
   <td><strong>&lt;datepicker type="grid"&gt;</strong>


    <p>Un sélecteur de date qui affiche un calendrier pour la sélection.</p>

    <pre class="eval">
&lt;datepicker type="grid" value="2007/02/20"/&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL/datepicker" title="fr/XUL/datepicker">Datepicker Reference</a></li>
    </ul>
   </td>
   <td><img alt="Image:Controlsguide-datepicker-grid.png" class="internal" src="/@api/deki/files/1260/=Controlsguide-datepicker-grid.png"></td>
  </tr>
  <tr>
   <td><strong>&lt;datepicker type="popup" &gt;</strong>


    <p>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.</p>

    <pre class="eval">
&lt;datepicker type="popup" value="2008/08/24"/&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL/datepicker" title="fr/XUL/datepicker">Datepicker Reference</a></li>
    </ul>
   </td>
   <td> </td>
  </tr>
  <tr>
   <td><strong>&lt;description&gt;</strong>
    <p>L'élément description permet d'ajouter un texte descriptif.</p>

    <pre class="eval">
&lt;description&gt;
  Sélectionner l'heure du début de l'évènement
&lt;/description&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL_Tutorial/Adding_Labels_and_Images#Description_Element" title="fr/XUL_Tutorial/Adding_Labels_and_Images#Description_Element">Plus d'information à propos de l'élément description</a>.</li>
     <li><a href="/fr/XUL/description" title="fr/XUL/description">Description Reference</a></li>
    </ul>
   </td>
   <td><img alt="Image:Controlguide-description.png" class="internal" src="/@api/deki/files/1235/=Controlguide-description.png"></td>
  </tr>
  <tr>
   <td><strong>&lt;groupbox&gt;</strong>
    <p>Un élément groupbox regroupe plusieurs contrôles d'interface usager et affiche une étiquette à l'aide de l'élément caption.</p>

    <pre class="eval">
&lt;groupbox&gt;
  &lt;caption label="Network"/&gt;
&lt;/groupbox&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL_Tutorial/Groupboxes" title="fr/XUL_Tutorial/Groupboxes">Plus d'information à propos de l'élément groupbox</a>.</li>
     <li><a href="/fr/XUL/groupbox" title="fr/XUL/groupbox">Groupbox Reference</a></li>
     <li>Related Elements: <code><a href="/fr/docs/Mozilla/Tech/XUL/caption" title="caption">caption</a></code></li>
    </ul>
   </td>
   <td><img alt="Image:Controlguide-groupbox.png" class="internal" src="/@api/deki/files/1236/=Controlguide-groupbox.png"></td>
  </tr>
  <tr>
   <td><strong>&lt;image&gt;</strong>
    <p>Une image spécifiée par une URL.</p>

    <pre class="eval">
&lt;image src="start.png"/&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL_Tutorial/Adding_Labels_and_Images#Images" title="fr/XUL_Tutorial/Adding_Labels_and_Images#Images">Plus d'information à propos de l'élément image</a>.</li>
     <li><a href="/fr/XUL/image" title="fr/XUL/image">Image Reference</a></li>
    </ul>
   </td>
   <td><img alt="Image:Controlguide-image.png" class="internal" src="/@api/deki/files/1237/=Controlguide-image.png"></td>
  </tr>
  <tr>
   <td><strong>&lt;label&gt;</strong>
    <p>L'élément label permet d'ajouter une étiquette à côté d'un champ de saisie.</p>

    <pre class="eval">
&lt;label control="volume" value="Volume:"/&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL_Tutorial/Adding_Labels_and_Images#Label_Element" title="fr/XUL_Tutorial/Adding_Labels_and_Images#Label_Element">Plus d'information à propos de l'élément label</a>.</li>
     <li><a href="/fr/XUL/label" title="fr/XUL/label">Label Reference</a></li>
    </ul>
   </td>
   <td><img alt="Image:Controlguide-label.png" class="internal" src="/@api/deki/files/1238/=Controlguide-label.png"></td>
  </tr>
  <tr>
   <td><strong>&lt;listbox&gt;</strong>
    <p>Une liste permet la sélection d'items textuels.</p>

    <pre class="eval">
&lt;listbox&gt;
  &lt;listitem label="Chocolat"/&gt;
  &lt;listitem label="Bonbon"/&gt;
&lt;/listbox&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL_Tutorial/List_Controls#List_Boxes" title="fr/XUL_Tutorial/List_Controls#List_Boxes">Plus d'information à propos de l'élément listbox</a>.</li>
     <li><a href="/fr/XUL/listbox" title="fr/XUL/listbox">Listbox Reference</a></li>
     <li>Related Elements: <code><a href="/fr/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code> <code><a href="/fr/docs/Mozilla/Tech/XUL/listcols" title="listcols">listcols</a></code> <code><a href="/fr/docs/Mozilla/Tech/XUL/listcol" title="listcol">listcol</a></code> <code><a href="/fr/docs/Mozilla/Tech/XUL/listhead" title="listhead">listhead</a></code> <code><a href="/fr/docs/Mozilla/Tech/XUL/listheader" title="listheader">listheader</a></code> <code><a href="/fr/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code></li>
    </ul>
   </td>
   <td><img alt="Image:Controlguide-listbox.png" class="internal" src="/@api/deki/files/1239/=Controlguide-listbox.png"></td>
  </tr>
  <tr>
   <td><strong>&lt;menulist&gt;</strong>
    <p>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 &lt;select&gt; en HTML.</p>

    <pre class="eval">
&lt;menulist&gt;
  &lt;menupopup&gt;
    &lt;menuitem label="Lions" value="l"/&gt;
    &lt;menuitem label="Tigres" value="t"/&gt;
    &lt;menuitem label="Ours" value="o"/&gt;
  &lt;/menupopup&gt;
&lt;/menulist&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL_Tutorial/List_Controls#Drop-down_Lists" title="fr/XUL_Tutorial/List_Controls#Drop-down_Lists">Plus d'information à propos de l'élément menulist</a>.</li>
     <li><a href="/fr/XUL/menulist" title="fr/XUL/menulist">Menulist Reference</a></li>
     <li>Éléments reliés: <code><a href="/fr/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> <code><a href="/fr/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></li>
    </ul>
   </td>
   <td><img alt="Image:Controlguide-menulist.png" class="internal" src="/@api/deki/files/1241/=Controlguide-menulist.png"></td>
  </tr>
  <tr>
   <td><strong>&lt;menulist editable="true"&gt;</strong>
    <p>Une zone combinée éditable est comme une zone combinée standard, excepté que la valeur actuellement sélectionnée est affichée dans une zone de saisie où l'on peut  sélectionner directement une valeur, ou l'on peut entrer des valeurs absentes de la liste.</p>

    <pre class="eval">
&lt;menulist editable="true"&gt;
  &lt;menupopup&gt;
    &lt;menuitem label="Elephants" value="Elephants"/&gt;
    &lt;menuitem label="Kangaroos" value="Kangaroos"/&gt;
    &lt;menuitem label="Bats" value="Bats"/&gt;
  &lt;/menupopup&gt;
&lt;/menulist&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL_Tutorial/List_Controls#Editable_menulist" title="fr/XUL_Tutorial/List_Controls#Editable_menulist">Plus d'informations à propos de l'élément menulist editable.</a></li>
     <li><a href="/fr/XUL/menulist" title="fr/XUL/menulist">Menulist Reference</a></li>
     <li>Éléments reliés: <code><a href="/fr/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> <code><a href="/fr/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></li>
    </ul>
   </td>
   <td><img alt="Image:Controlguide-menulist-editable.png" class="internal" src="/@api/deki/files/1240/=Controlguide-menulist-editable.png"></td>
  </tr>
  <tr>
   <td><strong>&lt;progressmeter&gt;</strong>
    <p>Une barre de progression est utilisée pour montrer la progression d'une tâche lente.</p>

    <pre class="eval">
&lt;progressmeter value="40"/&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL_Tutorial/Progress_Meters" title="fr/XUL_Tutorial/Progress_Meters">Plus d'informations à propos de l'élément progressmeter.</a></li>
     <li><a href="/fr/XUL/progressmeter" title="fr/XUL/progressmeter">Progressmeter Reference</a></li>
    </ul>
   </td>
   <td><img alt="Image:Controlguide-progressmeter.png" class="internal" src="/@api/deki/files/1242/=Controlguide-progressmeter.png"></td>
  </tr>
  <tr>
   <td><strong>&lt;radio&gt;</strong>
    <p>Un bouton radio est utilisé pour sélectionner uniquement une seule valeur d'une liste d'options à la fois.</p>

    <pre class="eval">
&lt;radiogroup&gt;
  &lt;radio label="Light" value="light"/&gt;
  &lt;radio label="Heavy" value="heavy"/&gt;
&lt;/radiogroup&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Buttons" title="fr/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Buttons">Plus d'informations à propos de l'élément radio.</a></li>
     <li><a href="/fr/XUL/radio" title="fr/XUL/radio">Radio Reference</a></li>
     <li>Éléments reliés: <code><a href="/fr/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></li>
    </ul>
   </td>
   <td><img alt="Image:Controlguide-radio.png" class="internal" src="/@api/deki/files/1243/=Controlguide-radio.png"></td>
  </tr>
  <tr>
   <td><strong>&lt;richlistbox&gt;</strong>
    <p>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.</p>

    <pre class="eval">
&lt;richlistbox&gt;
  &lt;richlistitem&gt;
    &lt;image src="happy.png"/&gt;
  &lt;/richlistitem&gt;
  &lt;richlistitem&gt;
    &lt;image src="sad.png"/&gt;
  &lt;/richlistitem&gt;
  &lt;richlistitem&gt;
    &lt;image src="angry.png"/&gt;
  &lt;/richlistitem&gt;
&lt;/richlistbox&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL/richlistbox" title="fr/XUL/richlistbox">Richlistbox Reference</a></li>
     <li>Éléments reliés: <code><a href="/fr/docs/Mozilla/Tech/XUL/richlistitem" title="richlistitem">richlistitem</a></code></li>
    </ul>
   </td>
   <td><img alt="Image:Controlguide-richlistbox.png" class="internal" src="/@api/deki/files/1244/=Controlguide-richlistbox.png"></td>
  </tr>
  <tr>
   <td><strong>&lt;scale&gt;</strong>


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

    <pre class="eval">
&lt;scale min="1" max="10"/&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL/scale" title="fr/XUL/scale">Scale Reference</a></li>
    </ul>
   </td>
   <td><img alt="Image:Controlguide-scale.png" class="internal" src="/@api/deki/files/1246/=Controlguide-scale.png"></td>
  </tr>
  <tr>
   <td><strong>&lt;textbox&gt;</strong>
    <p>A textbox which allows a single line of text to be entered.</p>

    <pre class="eval">
&lt;textbox value="firefox"/&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL_Tutorial/Input_Controls#Text_Entry_Fields" title="fr/XUL_Tutorial/Input_Controls#Text_Entry_Fields">More information about the textbox element</a>.</li>
     <li><a href="/fr/XUL/textbox" title="fr/XUL/textbox">Textbox Reference</a></li>
    </ul>
   </td>
   <td><img alt="Image:Controlguide-textbox.png" class="internal" src="/@api/deki/files/1251/=Controlguide-textbox.png"></td>
  </tr>
  <tr>
   <td><strong>&lt;textbox multiline="true"&gt;</strong>
    <p>A textbox which allows multiple lines of text to be entered.</p>

    <pre class="eval">
&lt;textbox multiline="true"/&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL_Tutorial/Input_Controls#Multiline_textbox" title="fr/XUL_Tutorial/Input_Controls#Multiline_textbox">More information about the multiple line textbox element</a>.</li>
     <li><a href="/fr/XUL/textbox" title="fr/XUL/textbox">Textbox Reference</a></li>
    </ul>
   </td>
   <td><img alt="Image:Controlguide-textbox-multiline.png" class="internal" src="/@api/deki/files/1247/=Controlguide-textbox-multiline.png"></td>
  </tr>
  <tr>
   <td><strong>&lt;textbox type="autocomplete"&gt;</strong>
    <p>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.</p>

    <pre class="eval">
&lt;textbox type="autocomplete" autocompletesearch="history"/&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL/textbox" title="fr/XUL/textbox">Textbox Reference</a></li>
    </ul>
   </td>
   <td> </td>
  </tr>
  <tr>
   <td><strong>&lt;textbox type="number"&gt;</strong>


    <p>A textbox for entering numbers. Two arrow buttons are displayed for cycling through values.</p>

    <pre class="eval">
&lt;textbox type="number" min="1" max="20"/&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL/textbox" title="fr/XUL/textbox">Textbox Reference</a></li>
    </ul>
   </td>
   <td><img alt="Image:Controlguide-textbox-number.png" class="internal" src="/@api/deki/files/1249/=Controlguide-textbox-number.png"></td>
  </tr>
  <tr>
   <td><strong>&lt;textbox type="password"&gt;</strong>
    <p>A textbox that hides the characters typed, used for entering passwords.</p>

    <pre class="eval">
&lt;textbox type="password"/&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL/textbox" title="fr/XUL/textbox">Textbox Reference</a></li>
    </ul>
   </td>
   <td><img alt="Image:Controlguide-textbox-password.png" class="internal" src="/@api/deki/files/1250/=Controlguide-textbox-password.png"></td>
  </tr>
  <tr>
   <td><strong>&lt;timepicker&gt;</strong>


    <p>A timepicker displays a set of textboxes for entering a time.</p>

    <pre class="eval">
&lt;timepicker value="12:05"/&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL/timepicker" title="fr/XUL/timepicker">Timepicker Reference</a></li>
    </ul>
   </td>
   <td><img alt="Image:Controlguide-timepicker.png" class="internal" src="/@api/deki/files/1253/=Controlguide-timepicker.png"></td>
  </tr>
  <tr>
   <td><strong>&lt;toolbarbutton&gt;</strong>
    <p>A button that is displayed on a toolbar.</p>

    <pre class="eval">
&lt;toolbarbutton label="Reload"/&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL_Tutorial/Toolbars" title="fr/XUL_Tutorial/Toolbars">More information about the toolbarbutton element</a>.</li>
     <li><a href="/fr/XUL/toolbarbutton" title="fr/XUL/toolbarbutton">Toolbarbutton Reference</a></li>
     <li>Related Elements: <code><a href="/fr/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></li>
    </ul>
   </td>
   <td><img alt="Image:Controlguide-toolbarbutton.png" class="internal" src="/@api/deki/files/1254/=Controlguide-toolbarbutton.png"></td>
  </tr>
  <tr>
   <td><strong>&lt;toolbarbutton type="menu"&gt;</strong>
    <p>A button that is displayed on a toolbar with a drop down menu attached to it.</p>

    <pre class="eval">
&lt;toolbarbutton type="menu" label="Show"&gt;
  &lt;menupopup&gt;
    &lt;menuitem label="Toolbars"/&gt;
    &lt;menuitem label="Status Bar"/&gt;
  &lt;/menupopup&gt;
&lt;/toolbarbutton&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL_Tutorial/Toolbars" title="fr/XUL_Tutorial/Toolbars">More information about this type of menu toolbarbutton element</a>.</li>
     <li><a href="/fr/XUL/toolbarbutton" title="fr/XUL/toolbarbutton">Toolbarbutton Reference</a></li>
     <li>Related Elements: <code><a href="/fr/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> <code><a href="/fr/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> <code><a href="/fr/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></li>
    </ul>
   </td>
   <td> </td>
  </tr>
  <tr>
   <td><strong>&lt;toolbarbutton type="menu-button"&gt;</strong>
    <p>A button on a toolbar that that has a separate arrow button with a menu attached to it. Unlike with the '<code>menu</code>' type, a separate action may be performed when the main part of the button is pressed.</p>

    <pre class="eval">
&lt;toolbarbutton type="menu-button" label="Open"&gt;
  &lt;menupopup&gt;
    &lt;menuitem label="Open Changed Files"/&gt;
    &lt;menuitem label="Open All"/&gt;
  &lt;/menupopup&gt;
&lt;/toolbarbutton&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL_Tutorial/Toolbars" title="fr/XUL_Tutorial/Toolbars">More information about this type of menu toolbarbutton element</a>.</li>
     <li><a href="/fr/XUL/toolbarbutton" title="fr/XUL/toolbarbutton">Toolbarbutton Reference</a></li>
     <li>Related Elements: <code><a href="/fr/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> <code><a href="/fr/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> <code><a href="/fr/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></li>
    </ul>
   </td>
   <td> </td>
  </tr>
  <tr>
   <td><strong>&lt;tree&gt;</strong>
    <p>A tree displays a hierarchy of items in multiple columns.</p>

    <pre class="eval">
&lt;tree&gt;
  &lt;treecols&gt;
    &lt;treecol label="Name" flex="1"/&gt;
    &lt;treecol label="Size" flex="1"/&gt;
  &lt;/treecols&gt;
  &lt;treechildren&gt;
    &lt;treeitem&gt;
      &lt;treerow&gt;
        &lt;treecell label="Popcorn"/&gt;
        &lt;treecell label="Large"/&gt;
      &lt;/treerow&gt;
    &lt;/treeitem&gt;
    &lt;treeitem&gt;
      &lt;treerow&gt;
        &lt;treecell label="Root Beer"/&gt;
        &lt;treecell label="Small"/&gt;
      &lt;/treerow&gt;
    &lt;/treeitem&gt;
  &lt;/treechildren&gt;
&lt;/tree&gt;
</pre>

    <ul>
     <li><a href="/fr/XUL_Tutorial/Trees" title="fr/XUL_Tutorial/Trees">More information about the tree element</a>.</li>
     <li><a href="/fr/XUL/tree" title="fr/XUL/tree">Tree Reference</a></li>
     <li>Related Elements: <code><a href="/fr/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code> <code><a href="/fr/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code> <code><a href="/fr/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code> <code><a href="/fr/docs/Mozilla/Tech/XUL/treecols" title="treecols">treecols</a></code> <code><a href="/fr/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code> <code><a href="/fr/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code></li>
    </ul>
   </td>
   <td><img alt="Image:Controlguide-tree.png" class="internal" src="/@api/deki/files/1255/=Controlguide-tree.png"></td>
  </tr>
 </tbody>
</table>