MDN wants to learn about developers like you:

아래의 표는 XUL에서 제공하는 사용자 인터페이스 컨트롤들의 목록입니다. 컨트롤들의 단계별 사용 방법은 XUL Tutorial을, 레퍼런스 정보는 XUL Reference를 참고하세요.


사용자가 누를 수 있는 버튼.

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

드롭다운 메뉴가 붙은 버튼. 버튼을 누르면 메뉴가 열립니다.

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

메뉴가 붙은 별도의 화살표 버튼이 있는 버튼. 'menu' 유형과 달리 버튼의 메인 부분을 눌렀을 때 다른 행위를 수행할 수 있습니다.

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

켜거나 끌 수 있는 컨트롤로, 일반적으로 가능 혹은 불가능할 수 있는 옵션을 만드는데 사용됩니다.

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

색을 선택하는데 사용하는 컨트롤.

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

버튼만 있는 특수한 색 선택기로, 버튼이 눌려지면 색을 선택할 수 있는 팝업이 출력됩니다.

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

날짜 입력에 사용할 수 있는 텍스트박스 집합.

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

날짜를 선택할 수 있는 달력이 출력되는 형태의 날짜선택기(datepicker).

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

날짜를 입력할 수 있는 텍스트박스와 함께 달력 팝업을 출력할 수 있는 버튼이 같이 있는 날짜 선택기.

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

긴 문장의 텍스트를 출력하는데 사용되는 요소

  Select a time for the event to start

다른 사용자 인터페이스 컨트롤들을 포함하는 제목이 있는 상자 요소

  <caption label="Network"/>

URL로 지정한 이미지

<image src="start.png"/>

label은 특정 컨트롤의 제목을 출력하기 위해 사용됩니다.

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

The listbox is used to select an item from a list of labelled items.

  <listitem label="Chocolate"/>
  <listitem label="Jelly Beans"/>

A menulist (or combobox) is used to create a control with a drop down to select a value.

    <menulist label="Lions" value="l"/>
    <menuitem label="Tigers" value="t"/>
    <menuitem label="Bears" value="b"/>
<menulist editable="true">

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">
    <menuitem label="Elephants" value="Elephants"/>
    <menuitem label="Kangaroos" value="Kangaroos"/>
    <menuitem label="Bats" value="Bats"/>

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

<progressmeter value="40"/>

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

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

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.

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

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"/>

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

<textbox value="firefox"/>
<textbox multiline="true">

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

<textbox multiline="true"/>
<textbox type="autocomplete">

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 type="number">

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

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

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

<textbox type="password"/>

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

<timepicker value="12:05"/>

A button that is displayed on a toolbar.

<toolbarbutton label="Reload"/>
<toolbarbutton type="menu">

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

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

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">
    <menuitem label="Open Changed Files"/>
    <menuitem label="Open All"/>

A tree displays a hierarchy of items in multiple columns.

    <treecol label="Name" flex="1"/>
    <treecol label="Size" flex="1"/>
        <treecell label="Popcorn"/>
        <treecell label="Large"/>
        <treecell label="Root Beer"/>
        <treecell label="Small"/>

문서 태그 및 공헌자

 이 페이지의 공헌자: chrisdavidmills, teoli, fscholz, Suguni
 최종 변경: chrisdavidmills,