<input type="button">
button
유형의 <input>
요소는 단순한 푸시 버튼으로 렌더링 됩니다. 이벤트 처리기(주로 click
이벤트)를 부착하면, 사용자 지정 기능을 웹 페이지 어느 곳에나 제공할 수 있습니다.
시도해보기
값
버튼 사용하기
<input type="button">
요소는 아무런 기본 기능도 가지지 않습니다. (유사한 요소인 <input type="submit">
(en-US)과 <input type="reset">
(en-US)은 각각 양식을 제출하고 초기화할 수 있습니다.) 버튼이 뭐라도 하게 만들려면 JavaScript 코드를 작성해야 합니다.
간단한 버튼
click
이벤트 처리기를 부착한 간단한 버튼을 통해 기계를 켜고 끄는 기능을 만드는 것으로 시작해보겠습니다. (기계라고는 하지만, 그냥 버튼의 value
와 문단 내용을 바꾸는 것입니다.)
<form>
<input type="button" value="기계 켜기">
</form>
<p>기계가 멈췄습니다.</p>
var btn = document.querySelector('input');
var txt = document.querySelector('p');
btn.addEventListener('click', updateBtn);
function updateBtn() {
if (btn.value === '기계 켜기') {
btn.value = '기계 끄기';
txt.textContent = '기계가 켜졌습니다!';
} else {
btn.value = '기계 켜기';
txt.textContent = '기계가 멈췄습니다.';
}
}
위의 스크립트는 DOM의 <input>
을 나타내는 HTMLInputElement
(en-US) 객체의 참조를 획득해 변수 button
에 저장합니다. 그 후 addEventListener()
를 사용해, click
이벤트가 발생했을 때 실행할 함수를 생성합니다.
버튼에 키보드 단축키 추가하기
접근 키라고도 불리는 키보드 단축키는 사용자가 키보드의 키 혹은 키 조합을 통해 버튼을 누를 수 있는 방법을 제공합니다. 단축키를 추가하는 법은, 다른 <input>
과 마찬가지로, accesskey
전역 특성을 추가하는 것입니다.
이번 예제에서는 이전 예제에 더해 s 키를 접근 키로 지정합니다. (브라우저/운영체제에 따라 특정 조합키를 같이 눌러야 할 수도 있습니다. accesskey
문서를 방문해 조합키 목록을 확인하세요.)
<form>
<input type="button" value="기계 켜기" accesskey="s">
</form>
<p>기계가 멈췄습니다.</p>
참고: 위 예제의 문제는, 사용자 입장에선 어떤 단축키가 있는지 알 수도 없다는 것입니다! 실제 웹 사이트에서는, 쉽게 접근 가능한 곳에 놓인 링크로 단축키 정보를 설명하는 문서를 가리키는 등 사이트 디자인을 방해하지 않는 선에서 단축키 정보를 제공해야 할 것입니다.
버튼 활성화와 비활성화
버튼을 비활성화하려면 간단히 disabled
전역 특성을 지정하는 것으로 충분합니다.
<input type="button" value="Disable me" disabled>
런타임에서 바꿀 땐 요소의 disabled
속성에 true
나 false
를 설정하면 끝입니다. 이번 예제의 버튼은 활성화 상태지만, 누르는 순간 btn.disabled = true
를 통해 비활성화합니다. 그 후, setTimeout()
함수를 통해 2초 후 다시 활성화 상태로 되돌립니다.
disabled
특성을 지정하지 않은 경우 부모 요소의 disabled
를 상속합니다. 이 점을 이용하면, 여러 개의 요소를 <fieldset>
등 부모 요소로 감싸고, 그 부모의 disabled
를 사용해 한꺼번에 상태를 통제할 수 있습니다.
다음 예제로 한 번에 비활성화하는 예제를 볼 수 있습니다. 이전 예제와 거의 똑같지만, 다른 점은 disabled
특성을 <fieldset>
에 설정한다는 점입니다. 1번 버튼을 눌러보세요. 모든 버튼이 비활성화되고, 2초 후 활성화됩니다.
유효성 검사
버튼은 제한할 값이 없으므로 유효성 검사의 대상이 아닙니다.
예제
아래 예제는 <canvas>
요소와 CSS(분량 조절을 위해 생략), JavaScript를 사용해 만든 매우 단순한 그림 그리기 앱입니다. 위쪽 두 컨트롤은 색과 펜 크기를 조절할 때 사용하고, 버튼은 클릭하면 캔버스의 그림을 모두 지우는 함수를 호출합니다.
<div class="toolbar">
<input type="color" aria-label="펜 색상">
<input type="range" min="2" max="50" value="30" aria-label="펜 크기"><span class="output">30</span>
<input type="button" value="캔버스 지우기">
</div>
<canvas class="myCanvas">
<p>Add suitable fallback here.</p>
</canvas>
var canvas = document.querySelector('.myCanvas');
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight-85;
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0,0,width,height);
var colorPicker = document.querySelector('input[type="color"]');
var sizePicker = document.querySelector('input[type="range"]');
var output = document.querySelector('.output');
var clearBtn = document.querySelector('input[type="button"]');
// covert degrees to radians
function degToRad(degrees) {
return degrees * Math.PI / 180;
};
// update sizepicker output value
sizePicker.oninput = function() {
output.textContent = sizePicker.value;
}
// store mouse pointer coordinates, and whether the button is pressed
var curX;
var curY;
var pressed = false;
// update mouse pointer coordinates
document.onmousemove = function(e) {
curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}
canvas.onmousedown = function() {
pressed = true;
};
canvas.onmouseup = function() {
pressed = false;
}
clearBtn.onclick = function() {
ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0,0,width,height);
}
function draw() {
if(pressed) {
ctx.fillStyle = colorPicker.value;
ctx.beginPath();
ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false);
ctx.fill();
}
requestAnimationFrame(draw);
}
draw();
명세
Specification |
---|
HTML Standard # button-state-(type=button) |
브라우저 호환성
BCD tables only load in the browser
같이 보기
<input>
요소와 그 인터페이스HTMLInputElement
(en-US).- 보다 현대적인
<button>
요소.