<input type="button"> - HTML: Hypertext Markup Language

이 페이지는 영어로부터 커뮤니티에 의하여 번역되었습니다. MDN Web Docs에서 한국 커뮤니티에 가입하여 자세히 알아보세요.

`버튼 사용하기`

요소는 아무런 기본 기능도 가지지 않습니다. (유사한 요소인 과 은 각각 양식을 제출하고 초기화할 수 있습니다.) 버튼이 뭐라도 하게 만들려면 JavaScript 코드를 작성해야 합니다.

`간단한 버튼`

click 이벤트 처리기를 부착한 간단한 버튼을 통해 기계를 켜고 끄는 기능을 만드는 것으로 시작해보겠습니다. (기계라고는 하지만, 그냥 버튼의 value와 문단 내용을 바꾸는 것입니다.)

html 기계가 멈췄습니다. js 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의 을 나타내는 HTMLInputElement 객체의 참조를 획득해 변수 button에 저장합니다. 그 후 addEventListener()를 사용해, click 이벤트가 발생했을 때 실행할 함수를 생성합니다.

`버튼에 키보드 단축키 추가하기`

접근 키라고도 불리는 키보드 단축키는 사용자가 키보드의 키 혹은 키 조합을 통해 버튼을 누를 수 있는 방법을 제공합니다. 단축키를 추가하는 법은, 다른 과 마찬가지로, accesskey 전역 특성을 추가하는 것입니다.

이번 예제에서는 이전 예제에 더해 s 키를 접근 키로 지정합니다. (브라우저/운영체제에 따라 특정 조합키를 같이 눌러야 할 수도 있습니다. accesskey 문서를 방문해 조합키 목록을 확인하세요.) html 기계가 멈췄습니다. 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 = "기계가 멈췄습니다."; } } 참고 : 위 예제의 문제는, 사용자 입장에선 어떤 단축키가 있는지 알 수도 없다는 것입니다! 실제 웹 사이트에서는, 쉽게 접근 가능한 곳에 놓인 링크로 단축키 정보를 설명하는 문서를 가리키는 등 사이트 디자인을 방해하지 않는 선에서 단축키 정보를 제공해야 할 것입니다.

`버튼 활성화와 비활성화`

버튼을 비활성화하려면 간단히 disabled 전역 특성을 지정하는 것으로 충분합니다.

html 런타임에서 바꿀 땐 요소의 disabled 속성에 true나 false를 설정하면 끝입니다. 이번 예제의 버튼은 활성화 상태지만, 누르는 순간 btn.disabled = true를 통해 비활성화합니다. 그 후, setTimeout() 함수를 통해 2초 후 다시 활성화 상태로 되돌립니다. var btn = document.querySelector("input"); btn.addEventListener("click", disableBtn); function disableBtn() { btn.disabled = true; btn.value = "비활성"; window.setTimeout(function () { btn.disabled = false; btn.value = "활성"; }, 2000); } disabled 특성을 지정하지 않은 경우 부모 요소의 disabled를 상속합니다. 이 점을 이용하면, 여러 개의 요소를 등 부모 요소로 감싸고, 그 부모의 disabled 를 사용해 한꺼번에 상태를 통제할 수 있습니다. 다음 예제로 한 번에 비활성화하는 예제를 볼 수 있습니다. 이전 예제와 거의 똑같지만, 다른 점은 disabled 특성을 에 설정한다는 점입니다. 1번 버튼을 눌러보세요. 모든 버튼이 비활성화되고, 2초 후 활성화됩니다. Button group var btn = document.querySelector("input"); var fieldset = document.querySelector("fieldset"); btn.addEventListener("click", disableBtn); function disableBtn() { fieldset.disabled = true; window.setTimeout(function () { fieldset.disabled = false; }, 2000); }

`유효성 검사`

버튼은 제한할 값이 없으므로 유효성 검사의 대상이 아닙니다.

`예제`

아래 예제는 요소와 CSS(분량 조절을 위해 생략), JavaScript를 사용해 만든 매우 단순한 그림 그리기 앱입니다. 위쪽 두 컨트롤은 색과 펜 크기를 조절할 때 사용하고, 버튼은 클릭하면 캔버스의 그림을 모두 지우는 함수를 호출합니다.

html 30 body { margin: 0; overflow: hidden; background: #ccc; } .toolbar { width: 150px; height: 75px; background: #ccc; padding: 5px; } input[type="color"], input[type="button"] { width: 90%; margin: 0 auto; display: block; } input[type="range"] { width: 70%; } span { position: relative; bottom: 5px; } js 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 # button-state-(type=button)

`브라우저 호환성`

같이 보기 요소와 그 인터페이스 HTMLInputElement. 보다 현대적인 Help improve MDN Was this page helpful to you? Learn how to contribute.This page was last modified on 2025년 5월 7일 by MDN contributors. View this page on GitHub • Report a problem with this content