Przycisk, który może być naciśnięty przez użytkownika.
<button label="Save" accesskey="S"/>
Przycisk, który posiada dołączone rozwijane menu. Naciskając przycisk otworzymy menu.
<button type="menu" label="View">
<menupopup>
<menuitem label="List"/>
<menuitem label="Details"/>
</menupopup>
</button>
Przycisk, który posiada odrębną strzałkę z załączonym do niej menu. W przeciwieństwie do przycisku typu "menu", po naciśnięciu na główną jego część może zostać wykonana oddzielna akcja.
<button type="menu-button" label="New">
<menupopup>
<menuitem label="New Document"/>
<menuitem label="New Image"/>
</menupopup>
</button>
Kontrolka, która może być włączona lub wyłączona, zazwyczaj stosujemy ją do utworzenia opcji, która może być włączona lub wyłączona.
<checkbox label="Show Toolbar Labels" checked="true"/>
Kontrolka pozwalająca użytkownikowi na wybór koloru.
<colorpicker color="#FF0000"/>
Specjalny typ kontrolki colorpicker, który pokazuje tylko przycisk, lecz po jego naciśnięciu wyświetli się okienko z możliwością wyboru koloru.
<colorpicker type="button" color="#CC0080"/>
Nowość w Mozilli 1.9 / Firefox 3
Ustawienie pola tekstowego, które może być zastosowane do wprowadzenia daty.
<datepicker value="2007/03/26"/>
Nowość w Mozilli 1.9 / Firefox 3
Element datepicker, który wyświetla siatkę z wyborem daty.
<datepicker type="grid" value="2007/02/20"/>
Nowość w Mozilli 1.9 / Firefox 3
Element datepicker, który wyświetla zbiór pól tekstowych do wprowadzenia daty, lecz posiada również przycisk, po którego naciśnięciu wyświetla się siatka kalendarza.
<datepicker type="popup" value="2008/08/24"/>
Element description jest stosowany do tekstu opisowego.
<description> Select a time for the event to start </description>
Element groupbox wyświetla pudełko z etykietą wokoło interfejsu kontrolek.
<groupbox> <caption label="Network"/> </groupbox>
- Więcej informacji o elemencie groupbox.
- Dokumentacja elementu groupbox
- Podobne elementy:
caption
Obrazek określony przez adres URL.
<image src="start.png"/>
Etykieta jest stosowana do tworzenia tekstu, który jest etykietą pobliskiej kontrolki.
<label control="volume" value="Volume:"/>
Element listbox jest stosowany do zaznaczenia pozycji z listy pozycji będących etykietami.
<listbox> <listitem label="Chocolate"/> <listitem label="Jelly Beans"/> </listbox>
Element menulist (lub combobox) jest stosowany do tworzenia kontrolki wyboru z rozwijanym menu.
<menulist>
<menupopup>
<menulist label="Lions" value="l"/>
<menuitem label="Tigers" value="t"/>
<menuitem label="Bears" value="b"/>
</menupopup>
</menulist>
- Więcej informacji o elemencie menulist.
- Dokumentacja elementu menulist
- Podobne elementy:
menupopupmenuitem
Edytowalna lista menu jest jak standardowa lista menu oprócz tego, że zaznaczona wartość jest wyświetlana w polu tekstowym, gdzie może ona zostać bezpośrednio zmodyfikowana lub posłużyć do wpisania nowej wartości, której nie ma w menu po jego rozwinięciu.
<menulist editable="true">
<menupopup>
<menuitem label="Elephants" value="Elephants"/>
<menuitem label="Kangaroos" value="Kangaroos"/>
<menuitem label="Bats" value="Bats"/>
</menupopup>
</menulist>
Pasek postępu jest stosowany do wyświetlenia postępu długości zadania.
<progressmeter value="40"/>
Przycisk opcji jest stosowany, gdy tylko jedna z zestawu opcji może zostać wybrana za jednym razem.
<radiogroup> <radio label="Light" value="light"/> <radio label="Heavy" value="heavy"/> </radiogroup>
- Więcej informacji o elemencie radio.
- Dokumentacja przycisku opcji
- Podobne elementy:
radiogroup
Element richlistbox wyświetla listę pozycji, gdzie jedna lub więcej z nich może zostać zaznaczona. W przeciwieństwie do elementu listbox, który został zaprojektowany, aby wyświetlać tylko tekst, richlistbox może wyświetlać dowolny typ zawartości.
<richlistbox>
<richlistitem>
<image src="happy.png"/>
</richlistitem>
<richlistitem>
<image src="sad.png"/>
</richlistitem>
<richlistitem>
<image src="angry.png"/>
</richlistitem>
</richlistbox>
- Dokumentacja Richlistbox
- Podobne elementy:
richlistitem
Nowość w Mozilli 1.9 / Firefox 3
Element scale wyświetla pasek z uchwytem, który może być przesuwany wzdłuż paska, aby wybrać wartości z określonego zakresu.
<scale min="1" max="10"/>
Element textbox, który pozwala wprowadzić pojedynczą linię tekstu.
<textbox value="firefox"/>
Element textbox, który pozwala na wprowadzenie wieloliniowego tekstu.
<textbox multiline="true"/>
Element textbox, który dostarcza rozwijane menu pokazujące podpowiedzi, które mogłyby pasować do wpisywanego przez użytkownika tekstu. Użytkownik może zaznaczyć jedną z podpowiedzi, aby wstawić ją do pola tekstowego.
<textbox type="autocomplete" autocompletesearch="history"/>
Nowość w Mozilli 1.9 / Firefox 3
Element textbox dla wprowadzanych liczb. Dwa przyciski strzałek są wyświetlane do przechodzenia między wartościami.
<textbox type="number" min="1" max="20"/>
Element textbox, który ukrywa typ znaków, stosowany w polach z hasłami.
<textbox type="password"/>
Nowość w Mozilli 1.9 / Firefox 3
Element timepicker wyświetla zbiór pól tekstowych do wprowadzenia czasu.
<timepicker value="12:05"/>
Przycisk, który jest wyświetlany na pasku narzędzi.
<toolbarbutton label="Reload"/>
Przycisk, który jest wyświetlony z załączonym rozwijalnym menu w sobie.
<toolbarbutton type="menu" label="Show">
<menupopup>
<menuitem label="Toolbars"/>
<menuitem label="Status Bar"/>
</menupopup>
</toolbarbutton>
Przycisk na pasku narzędzi, który posiada odrębną strzałkę z załączonym do niej menu. W przeciwieństwie do przycisku typu "menu", po naciśnięciu na główną jego część może zostać wykonana oddzielna akcja.
<toolbarbutton type="menu-button" label="Open">
<menupopup>
<menuitem label="Open Changed Files"/>
<menuitem label="Open All"/>
</menupopup>
</toolbarbutton>
Drzewo wyświetla hierarchię pozycji w wielu kolumnach.
<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>
