빠른 시작: 단추 추가(HTML)

아티클
03/04/2016

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

다양한 유형의 button 컨트롤을 만드는 방법을 알아봅니다.

사전 요구 사항

빠른 시작: HTML 컨트롤 추가 및 이벤트 처리

단추 및 단추 이벤트 정보

HTML로 단추를 만들려면 HTML에 button 요소를 추가합니다. HTML로 단추의 콘텐츠를 설정하려면 여는 button 태그와 닫는 해당 태그 사이에 텍스트를 추가합니다. button는 텍스트 및 이미지와 같은 다양한 유형의 콘텐츠를 포함할 수 있습니다. 대부분의 단추는 텍스트만 포함합니다.

<button>A button</button>

JavaScript로 button을 만들려면 새 button 개체를 만들어 DOM(문서 개체 모델)에 연결합니다. 단추 텍스트를 설정하려면 innerHTML 속성을 사용합니다.

var newButton = document.createElement("button");
newButton.innerHTML = "A button";
var buttonParent = document.getElementById("buttonParent");
buttonParent.appendChild(newButton);

단추 유형에는 표준 단추, 전송 단추 및 다시 설정 단추의 세 가지가 있습니다. 원하는 단추 유형을 지정하려면 해당 type 특성을 "button", "submit" 또는 "reset"으로 설정합니다.

사용자가 단추를 조작하는 주된 방법은 단추를 클릭하는 것이므로 앱에 표준 단추를 추가할 경우 해당 click 이벤트를 처리합니다. (전송 및 다시 설정 단추에 대해서는 click 이벤트를 처리할 필요는 없는데 이는 이러한 단추가 자신이 속한 form 요소에 대한 작업을 자동으로 수행하기 때문입니다.)

click 이벤트를 처리할 때 처리기에서 클릭 지점의 좌표, 이벤트를 트리거한 단추 등을 찾는 데 사용할 수 있는 MouseEvent 개체를 받습니다.

click 이벤트는 마우스, 터치 및 펜/스타일러스 입력에 대해 작동합니다. 모든 단추 이벤트의 전체 목록은 button reference page를 참조하세요.

표준 단추 추가

즉각적인 작업을 시작하는 데에는 표준 button를 사용합니다.

다른 페이지로 이동하는 작업인 경우에는 단추 대신 링크를 사용합니다. 예외: 마법사 탐색인 경우에는 "뒤로" 및 "다음"이라는 레이블이 붙은 단추를 사용합니다. 역방향 탐색 또는 상위 수준 탐색 등의 경우에는 win-backbutton 스타일의 단추를 사용합니다.

표준 button을 만들려면 태그에 button 요소를 추가하면 됩니다. 그런 다음 button 컨트롤의 여는 태그와 닫는 태그 사이에 단추의 면에 표시할 텍스트를 추가합니다.

이 예에서는 표준 button 및 출력 단락을 만듭니다.

<button 
    id="standardButton" 
    onclick="ButtonExamples.standardButtonClicked(event)">Click me!</button>
<p id="outputParagraph"></p>

다음 예에서는 ButtonExamples.standardButtonClicked 이벤트 처리기를 정의하고 공개적으로 액세스할 수 있도록 만듭니다. 단추를 클릭하면 이 예제에서는 이전 예제에서 정의한 출력 단락에 특정 텍스트를 표시합니다.

function standardButtonClicked(eventInfo) {
    document.getElementById("outputParagraph").innerText = "Click!"; 
}

WinJS.Namespace.define("ButtonExamples", 
{ standardButtonClicked : standardButtonClicked });

(또한 input 요소를 만들고 해당 type 특성을 "button"으로 설정하여 표준 단추를 만들 수 있습니다.)

양식 내에 표준 단추 추가

form 내에서 특성이 없는 button 요소가 양식의 첫 번째 단추인 경우 전송 단추 역할을 합니다. 표준 단추를 원하는 경우 button 요소의 type 특성을 "button"으로 설정합니다.

<form>
    <button 
        type="button"
        onclick="ButtonExamples.standardFormButtonClicked(event)">I'm a standard button!</button>
    <p id="outputParagraph2"></p>
</form>

function standardFormButtonClicked(eventInfo) {
    document.getElementById("outputParagraph2").innerText = "Click!";
}

WinJS.Namespace.define("ButtonExamples",
{ standardFormButtonClicked: standardFormButtonClicked });

전송 단추 추가

양식 컨트롤에 입력된 데이터를 전송하려면 form 내에 전송 단추를 사용합니다. 전송 단추를 만들려면 button 요소를 추가하고 해당 type 특성을 "submit"으로 설정합니다.

<form action="https://www.bing.com" method="get"
    onsubmit="ButtonExamples.formSubmitted(event)">
    <input type="text" id="searchQuery" name="q" placeholder="Enter a search query." />
    <button type="submit">Search</button>
    <button type="reset">Clear</button>
</form> 
<p id="formOutput"></p>

function formSubmitted(eventInfo) {
    document.getElementById("formOutput").innerText =
        "You searched for " + document.getElementById("searchQuery").value;
}

WinJS.Namespace.define("ButtonExamples",
{ formSubmitted: formSubmitted });

이 단추에 대해서는 이벤트 처리기를 만들 필요가 없습니다. 전송 단추를 클릭하면 양식의 작업이 자동으로 트리거됩니다.

(또한 input 요소를 만들고 해당 type 특성을 "submit"으로 설정하여 전송 단추를 만들 수 있습니다.)

다시 설정 단추 추가

다시 설정 단추는 양식의 입력 요소를 해당 초기 값으로 다시 설정합니다. 다시 설정 단추를 만들려면 button 요소를 추가하고 해당 type 특성을 "reset"으로 설정합니다.

<form action="https://www.bing.com" method="get">
    <input type="text" id="searchQuery2" name="q" placeholder="Enter a search query." />
    <button type="submit">Search</button>
    <button type="reset">Clear</button>
</form>

이 단추에 대해서는 이벤트 처리기를 만들 필요가 없습니다. 다시 설정 단추를 클릭하면 양식이 자동으로 다시 설정됩니다.

(또한 input 요소를 만들고 해당 type 특성을 "reset"으로 설정하여 다시 설정 단추를 만들 수 있습니다.)

단추 스타일 지정

단추 스타일 지정에 대한 자세한 내용은 단추의 스타일을 지정하는 방법을 참조하세요.

요약

이 빠른 시작에서는 다양한 유형의 button 컨트롤을 만드는 방법에 대해 알아보았습니다.