ユーザが押すことのできるボタン。

<button label="保存" accesskey="S"/>

• button 要素の詳細。
• button のリファレンス

ドロップダウンメニューの付いたボタン。ボタンを押すとメニューが開きます。

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

• button 要素のこの種類のメニューの詳細。
• button のリファレンス
• 関する要素: menupopup menuitem

メニューを表示する分離した矢印ボタンを持つボタン。'menu' タイプとは違い、ボタンのメイン部分が押された時に 【訳注: メニューを表示するのではなく】 別のアクションが実行されます。

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

• button 要素のこの種類のメニューの詳細。
• button のリファレンス
• 関連する要素: menupopup menuitem

オンにしたりオフにできるコントロール。特に有効か無効かを切り替えるオプションを作るのに使われます。

<checkbox label="ツールバーのラベルを表示" checked="true"/>

• checkbox 要素の詳細。
• checkbox のリファレンス

色を選択するコントロール

<colorpicker color="#FF0000"/>

• colorpicker のリファレンス

ボタンを押すと色を選択するポップが表示される、カラーピッカの特別な種類。

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

• colorpicker のリファレンス

Firefox 3 の新機能

日付の入力に使われるテキストボックス群。

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

• datepicker のリファレンス

Firefox 3 の新機能

日付を選択するカレンダ枠を表示する日付ピッカ。

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

• datepicker のリファレンス

Firefox 3 の新機能

日付入力のためのテキストボックスを表示しますが、カレンダ枠を表示するためのボタンもある日付ピッカ

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

• datepicker のリファレンス

description 要素は説明的なテキストに使われます。

<description>
  イベントの始まる時間を選択してください
</description>

• description 要素の詳細。
• description のリファレンス

グループボックスは他のユーザインタフェースコントールを取り囲む、ラベルのついたボックスを表示します

<groupbox>
  <caption label="ネットワーク"/>
</groupbox>

• groupbox 要素の詳細。
• groupbox のリファレンス
• 関連する要素: caption

URL で指定された画像。

<image src="start.png"/>

• image 要素の詳細。
• image のリファレンス

ラベルは近いコントロールに名前となるテキストを付けるのに使われます。

<label control="volume" value="音量:"/>

• label 要素の詳細。
• label のリファレンス

リストボックスはラベル付けされた項目のリストから、ある項目を選ぶのに使われます。

<listbox>
  <listitem label="チョコレート"/>
  <listitem label="ようかん"/>
</listbox>

• listbox 要素の詳細。
• listbox のリファレンス
• 関連する要素: listcell listcols listcol listhead listheader listitem

メニューリスト (あるいはコンボボックス) は、ある値を選択するためのドロップダウンを持つコントロールを作るのに使われます。

<menulist>
  <menupopup>
    <menuitem label="ライオン" value="l"/>
    <menuitem label="トラ" value="t"/>
    <menuitem label="クマ" value="b"/>
  </menupopup>
</menulist>

• menulist 要素の詳細。
• Menulist リファレンス
• 関連する要素: menupopup menuitem

編集できるメニューリストは、選択された値がテキストボックスに表示されること以外、標準的なメニューリストそっくりです。テキストボックスでは値を直接変更したりポップアップリストに無い値へ変更されるかもしれません。

<menulist editable="true">
  <menupopup>
    <menuitem label="ゾウ" value="Elephants"/>
    <menuitem label="カンガル" value="Kangaroos"/>
    <menuitem label="コウモリ" value="Bats"/>
  </menupopup>
</menulist>

• 編集できる menulist 要素の詳細。
• menulist のリファレンス
• 関連する要素: menupopup menuitem

プログレスメータは長くかかる作業の進捗状況を表示するのに使われます。

<progressmeter value="40"/>

• progressmeter 要素の詳細。
• progressmeter のリファレンス

ラジオボタンは 1 回に 1 つしか選択されないオプションを作るのに使われます。

<radiogroup>
  <radio label="軽い" value="light"/>
  <radio label="重い" value="heavy"/>
</radiogroup>

• radio 要素の詳細.
• radio のリファレンス
• 関連する要素: radiogroup

リッチリストボックスは項目を 1 つ以上選択できるリストを表示します。テキストだけを表示するよう設計されたリストボックスとは異なり、リッチリストボックスはどんな種類の内容でも表示します。

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

• richlistbox のリファレンス
• 関連する要素: richlistitem

Firefox 3 の新機能

スケールは、ある範囲内で値を選択するためにバーを滑る、つまみのついたバーを表示します。

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

• scale のリファレンス

テキストを 1 行入力できるテキストボックス

<textbox value="firefox"/>

• textbox 要素の詳細。
• textbox のリファレンス

テキストを複数行入力できるテキストボックス

<textbox multiline="true"/>

• 複数行の textbox 要素の詳細。
• textbox のリファレンス

ユーザの入力を補完する候補のドロップダウンを提供するテキストボックス。ユーザはテキストボックスを埋めるために候補の 1 つを選択できます。

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

• textbox のリファレンス

Firefox 3 の新機能

数値を入力するためのテキストボックス。取りうる値全体を循環する、2 つの矢印ボタンが表示されます。

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

• Textbox のリファレンス

パスワードの入力に使われる、タイプされた文字を隠すテキストボックス。

<textbox type="password"/>

• textbox のリファレンス

Firefox 3 の新機能

時間ピッカは時間を入力するためのテキストボックス群を表示します。

<timepicker value="12:05"/>

• timepicker のリファレンス

ツールバー上に表示されるボタン

<toolbarbutton label="再読み込み"/>

• toolbarbutton 要素の詳細。
• toolbarbutton のリファレンス
• 関連する要素: toolbar

ドロップダウンメニューのついた、ツールバー上に表示されるボタン

<toolbarbutton type="menu" label="Show">
  <menupopup>
    <menuitem label="ツールバー"/>
    <menuitem label="ステータスバー"/>
  </menupopup>
</toolbarbutton>

• この種類のメニューの toolbarbutton 要素.
• toolbarbutton のリファレンス
• 関連する要素: menupopup menuitem toolbar

メニューを表示する分離した矢印ボタンを持つ、ツールバー上のボタン。'menu' タイプとは違い、ボタンのメイン部分が押された時に 【訳注: メニューを表示するのではなく】 別のアクションが実行されます。

<toolbarbutton type="menu-button" label="Open">
  <menupopup>
    <menuitem label="変更されたファイルを開く"/>
    <menuitem label="全て開く"/>
  </menupopup>
</toolbarbutton>

• More information about this type of menu toolbarbutton element.
• Toolbarbutton Reference
• 関連する要素: menupopup menuitem toolbar

複列の列に項目の階層構造を表示します。

<tree>
  <treecols>
    <treecol label="名前" flex="1"/>
    <treecol label="大きさ" flex="1"/>
  </treecols>
  <treechildren>
    <treeitem>
      <treerow>
        <treecell label="ポップコーン"/>
        <treecell label="大"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell label="ルートビア"/>
        <treecell label="小"/>
      </treerow>
    </treeitem>
  </treechildren>
</tree>

• tree 要素の詳細。
• tree のリファレンス
• 関連する要素: treecell treechildren treecol treecols treeitem treerow