element is used to group related XUL elements together, much like the HTML
fieldset element is used to group HTML elements. The
is a type of box, and the elements it contains are aligned according to the XUL box rules. However, there are several differences between groupboxes and regular boxes:
- The groupbox can be labeled using the
- The groupbox is displayed in a special way—usually with a beveled border and a caption, although you can change the appearance using CSS.
The example below shows a simple groupbox:
<groupbox> <caption label="Answer"/> <description value="Banana"/> <description value="Tangerine"/> <description value="Phone Booth"/> <description value="Kiwi"/> </groupbox>
This will cause four pieces of text to be displayed surrounded by a box with the label Answer. Note that the groupbox has a vertical orientation by default which is necessary to have the text elements stack in a single column.
You can also add child elements inside the
element to create a more complex caption. For example, Mozilla's Font preferences panel uses a drop-down menu as a caption. Although any content can be used, usually you would use a checkbox or dropdown menu.
<groupbox flex="1"> <caption> <checkbox label="Enable Backups"/> </caption> <hbox> <label control="dir" value="Directory:"/> <textbox id="dir" flex="1"/> </hbox> <checkbox label="Compress archived files"/> </groupbox>
In this example, a checkbox has been used as a caption. We might use a script to enable and disable the contents of the groupbox when the
checkbox is checked and unchecked. The groupbox contains a horizontal
box with a
textbox. Both the textbox and groupbox have been made flexible so the textbox expands when the window is expanded. The additional checkbox appears below the textbox because of the vertical orientation of the groupbox. We'll add a groupbox to the find files dialog in the next section.
You can use the
element to group radio elements together. The
is a type of box. You can put any element you want inside it, and apart from its special handling of
buttons, it works like any other box.
Any radio buttons placed inside the radio group will be grouped together, even if they are inside nested boxes. This could be used to add extra elements within the structure, such as in the following example:
<radiogroup> <radio id="no" value="no" label="No Number"/> <radio id="random" value="random" label="Random Number"/> <hbox> <radio id="specify" value="specify" label="Specify Number:"/> <textbox id="specificnumber"/> </hbox> </radiogroup>
Next, we'll use what we've learned so far and add some additional elements to the find files dialog.