HTML button 태그의 value 속성이란?
<button> 요소의 value 속성은 버튼의 초기값(initial value)을 지정하는 데 사용됩니다. 일반적으로 <form> 태그 안에서 버튼 값을 폼 데이터와 함께 서버로 전송할 때 활용되지만, 자바스크립트와 함께 사용하면 폼 없이도 다양한 인터랙션을 손쉽게 구현할 수 있습니다. 이번 글에서는 폼을 사용하지 않는 예제를 통해 value 속성의 동작 방식을 살펴보겠습니다.
문법
<button value="value">
위 문법에서 value는 버튼에 부여할 초기값을 의미합니다.
value 속성 활용 예제
다음은 <button> 요소에 value 속성을 적용한 실전 예제입니다. 두 개의 버튼을 만들고, 각 버튼을 클릭하면 해당 버튼의 value 값이 화면에 표시되도록 구현했습니다.
<!DOCTYPE html>
<html>
<body>
<p>아래 버튼을 클릭하면 학습 콘텐츠 정보를 확인할 수 있습니다...</p></br></br>
<button id = "button1" value = "Learning" onclick = "demo1()">Get Tutorials</button>
<button id = "button2" value = "InterviewAnswers" onclick = "demo2()">Get InterviewQA</button>
<p id = "myid"></p>
<script>
function demo1() {
var val1 = document.getElementById("button1").value;
document.getElementById("myid").innerHTML = val1;
}
function demo2() {
var val1 = document.getElementById("button2").value;
document.getElementById("myid").innerHTML = val1;
}
</script>
</body>
</html>코드를 실행하면 처음에는 아래와 같은 화면이 나타납니다.
“Get Tutorials” 버튼을 클릭하면 해당 버튼의 value 값인 “Learning”이 아래와 같이 출력됩니다.
반대로 “Get InterviewQA” 버튼을 클릭하면 “InterviewAnswers” 값이 화면에 표시됩니다.
자바스크립트 함수 동작 원리
위 예제에서는 버튼 클릭 시 value 값을 변수에 담아 화면에 출력하는 자바스크립트 함수를 사용했습니다. 그중 하나가 demo1() 함수입니다.
function demo1() {
var val1 = document.getElementById("button1").value;
document.getElementById("myid").innerHTML = val1;
}이 함수는 getElementById() 메서드로 id가 “button1”인 버튼의 value 값을 읽어온 뒤, id가 “myid”인 <p> 요소의 innerHTML에 할당하여 결과를 화면에 표시합니다.
함수 호출은 버튼의 onclick 속성을 통해 이루어집니다. 즉, 사용자가 버튼을 클릭하면 demo1() 함수가 실행되면서 버튼의 value 값이 즉시 화면에 반영되는 구조입니다.
<button id = "button1" value = "Learning" onclick = "demo1()"> Get Tutorials </button>