mozilla
검색 결과

    Input Controls

    XUL은 HTML의 form 컨트롤과 비슷한 요소들을 가지고 있습니다.

    텍스트 입력 컨트롤

    HTML은 텍스트 입력 컨트롤로 사용할 수 있는 input 요소를 가집니다. XUL 또한 textbox라고 하는 텍스트를 입력하는데 사용되는 비슷한 요소를 가지고 있습니다. 아무런 속성이 지정되어 있지 않으면 textbox 요소는 사용자가 텍스트를 입력할 수 있는 상자를 만들어 냅니다. Textbox는 HTML의 input 컨트롤과 많은 동일한 속성을 사용할 수 있습니다. 다음은 속성들의 일부입니다.

    id 
    Textbox를 실별하는데 사용할 수 있는 유일식별자(unique identifier) 입니다.
    class 
    Textbox의 스타일 클래스 입니다.
    value 
    Textbox의 기본 텍스트를 지정하고 싶으면, 이 속성값에 적용하면 됩니다.
    disabled 
    입력을 할 수 없게 하려면 이 속성을 true로 지정합니다.
    type 
    입력한 텍스트를 숨기는 textbox를 만드려면 이 속성을 password라는 특별한 값으로 지정할 수 있습니다.
    maxlength 
    Textbox에 입력할 수 있는 최대 문자수를 지정합니다.

    HTML에서는 input 요소로 다양한 종류의 컨트롤 타입을 만들 수 있지만, XUL에서는 각 타입에 대응되는 별도의 요소가 있습니다.

    다음은 몇 가지 textbox 예제입니다.

    예제 1 : Source View

    <label control="some-text" value="Enter some text"/>
    <textbox id="some-text"/>
    <label control="some-password" value="Enter a password"/>
    <textbox id="some-password" type="password" maxlength="8"/>
    

    여러줄(multiline) textbox

    위의 textbox 예제는 한줄짜리 텍스트만 입력하는데 사용할 수 있는 입력 컨트롤을 생성합니다. HTML에서는 더 많은 텍스트 입력 영역이 있는 textarea 요소가 존재합니다. XUL에서는 textbox 요소를 이러한 목적으로 사용할 수 있늡니다(서로 다른 두개 요소는 필요 없습니다). multiline속성을 true로 지정하면 텍스트 입력 필드는 다중 행을 표시합니다.

    예제 2 : Source View

    <textbox multiline="true"
               value="This is some text that could wrap onto multiple lines."/>
    

    HTML의 textarea처럼, 크기를 지정하기 위해 rowscols를 사용할 수 있습니다. 이 속성들은 출력될 문자의 행과 열수를 지정합니다.

    우리의 파일 찾기 예제

    이제 파일 찾기 대화상자에 검색을 위한 입력 필드를 추가합니다. Textbox 요소를 사용할 것입니다.

    <label value="Search for:" control="find-text"/>
    <textbox id="find-text"/>
    
    <button id="find-button" label="Find"/>
    
    Image:inputs1.png

    앞선 섹션에서 만든 버튼 앞 부분에 위의 코드를 추가하세요. 창을 열면, 이미지와 같이 보일 것입니다.

    라벨과 텍스트 input 필드가 윈도우에 출력됩니다. 텍스트박스는 완전히 작동하며 텍스트를 입력하거나 선택할 수 있습니다. 예제에서 라벨의 control 속성이 사용되어서 label이 클릭되면 텍스트 박스가 선택됩니다.

    체크박스와 라디오 버튼

    체크박스와 라디오 버튼을 만들기 위해서는 두 개의 추가적인 요소를 사용합니다. 이것들은 버튼의 일종입니다. 체크박스 요소는 가능 또는 불가능될 수 있는 옵션을 위해 사용할 수 있습니다. 라디오 버튼은 비슷한 목적으로 사용할 수 있는 것으로 여러개의 항목 중 하나만 선택할 수 있을 때 사용합니다.

    체크박스와 라디오 버튼은 버튼과 대부분 동일한 속성을 사용합니다. 아래 예제는 간단한 체크박스와 라디오 버튼을 보여줍니다.

    <checkbox id="case-sensitive" checked="true" label="Case sensitive"/>
    <radio id="orange" label="Orange"/>
    <radio id="violet" selected="true" label="Violet"/>
    <radio id="yellow" label="Yellow"/>
    

    첫번째 줄에서는 간단한 checkbox를 생성합니다. 사용자가 체크박스를 클릭하면 선택 또는 선택되지 않은 상태를 교환합니다. checked 속성은 처음 상태를 나타내기 위해 사용할 수 있습니다. 이것은 true또는 false로 지정되어야 합니다. label 속성은 체크박스 옆에 출력될 라벨을 지정하기 위해 사용합니다. radio 버튼에서는 checked 속성 대신 selected를 사용해야 합니다. 라디오 버튼이 처음 선택된 상태로 마들기 위해서는 selectedtrue로 설정하세요.

    라디오그룹 요소

    라디오 버튼들을 그룹짖기 위해서는 radiogroup 요소를 사용할 필요가 있습니다. 라디오 그룹내에 있는 라디오 버튼들 중 하나만 선택할 수 있습니다. 하나를 선택하면 같은 그룹 내의 다른 것들은 모두 꺼지게 됩니다. 다음 예제는 이러한 내용을 보여줍니다.

    예제 3 : Source View

    <radiogroup>
      <radio id="orange" label="Orange"/>
      <radio id="violet" selected="true" label="Violet"/>
      <radio id="yellow" label="Yellow"/>
    </radiogroup>
    

    속성

    버튼처럼, 체크박스와 라디오 버튼들도 라벨과 이미지로 구성되며, 버튼들이 눌러졌을 때체크된 상태와 체크되지 않은 상태의 이미지가 바뀌어집니다. 체크 박스는 버튼과 많은 동일한 속성을 가집니다.

    label 
    체크 박스나 라디오 버튼의 라벨를 설정합니다.
    disabled 
    체크 박스나 라디오 버튼을 가능 또는 불가능 하게 하기 위해서 본 속성을 truefalse로 설정하세요.
    accesskey 
    요소를 선택할 때 사용하는 단축키입니다. 여기에 지정된 문자는 보통 라벨에 아랫줄을 그어 출력합니다.

    여기까지의 파일 찾기 예제 : Source View

    다음 섹션에서는 리스트 박스 만들기를 위한 몇 가지 요소들에 대해 알아볼 것입니다.

    문서 태그 및 공헌자

    태그: 
    Contributors to this page: teoli, Suguni
    최종 변경: teoli,