HTML DOM Input Reset 값 속성 완벽 가이드

HTML DOM Input Reset 값 속성이란?

HTML DOM의 Input Reset 값(value) 속성은 폼의 리셋 버튼에 지정된 value 속성 값을 가져오거나 새로 설정할 때 사용합니다. 리셋 버튼의 value 속성은 버튼 화면에 표시되는 텍스트를 결정하며, 별도로 지정하지 않으면 기본값인 "Reset"이 표시됩니다.

문법(Syntax)

값 속성을 설정하는 문법은 다음과 같습니다.

resetObject.value = text;

여기서 text는 리셋 버튼에 표시할 텍스트를 지정하는 데 사용됩니다. 반대로 현재 설정된 값을 읽어올 때는 아래와 같이 작성합니다.

resetObject.value;

예제(Example)

다음은 input reset 값 속성을 활용한 예제입니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input reset Value property</h1>
<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1">
</form>
<p>Get the above element value by clicking the below button</p>
<button onclick="changeValue()">CHANGE</button>
<p id="Sample"></p>
<script>
   function changeValue() {
      document.getElementById("RESET1").value="Form_Reset";
      document.getElementById("Sample").innerHTML="The reset button value is changed and the value can be seen on the button itself";
   }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM Input Reset 값 속성 완벽 가이드 – 문법부터 예제까지

CHANGE 버튼을 클릭한 후 −

HTML DOM Input Reset 값 속성 완벽 가이드 – 문법부터 예제까지

예제 코드 분석

위 예제에서 핵심적인 부분을 단계별로 살펴보겠습니다.

1. 리셋 버튼이 포함된 폼 생성

type="reset", id="RESET1"로 지정된 <input> 요소를 생성했습니다. 이 버튼을 클릭하면 폼에 입력된 모든 데이터가 초기화됩니다. 이 버튼은 두 개의 텍스트 입력 필드를 포함하는 폼 내부에 위치하며, 폼에는 초록색 테두리와 여백을 지정하는 인라인 스타일이 적용되어 있습니다.

<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1">
</form>

2. CHANGE 버튼 생성

사용자가 클릭하면 changeValue() 함수를 호출하는 "CHANGE" 버튼을 만들었습니다.

<button onclick="changeValue()">CHANGE</button>

3. changeValue() 함수의 동작 원리

changeValue() 함수는 getElementById() 메서드를 사용해 type이 reset인 input 요소에 접근한 뒤, 해당 요소의 "value" 속성 값을 "Form_Reset"으로 변경합니다. 변경된 값은 곧바로 버튼 화면에 표시되며, innerHTML 속성을 통해 id가 "Sample"인 단락에도 변경 사항을 알리는 메시지가 함께 출력됩니다.

function changeValue() {
   document.getElementById("RESET1").value="Form_Reset";
   document.getElementById("Sample").innerHTML="The reset button value is changed and the value can be seen on the button itself";
}

참고 사항

input reset 값 속성은 Chrome, Edge, Firefox, Safari, Opera 등 주요 브라우저에서 모두 지원됩니다. 이 속성을 활용하면 버튼에 새로고침 없이도 동적으로 텍스트를 변경할 수 있어, 다국어 UI 구현이나 상황에 따른 버튼 라벨 변경 등에 유용하게 사용할 수 있습니다.