HTML DOM의 Input Reset name 속성은 리셋 버튼(reset button)의 name 속성 값을 설정하거나 반환하는 데 사용됩니다. name 속성은 폼(form) 데이터가 서버로 제출된 후 해당 데이터를 식별하는 중요한 역할을 하므로, 자바스크립트를 통해 동적으로 변경할 수 있으면 폼 처리 로직을 유연하게 구성할 수 있습니다.
구문(Syntax)
name 속성을 설정하는 구문은 다음과 같습니다.
resetObject.name = name
여기서 name은 리셋 버튼에 지정할 이름을 의미합니다.
예제(Example)
Reset name 속성의 실제 사용 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input Reset name 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>아래 버튼을 클릭하면 위 리셋 버튼의 이름이 변경됩니다</p>
<button type="button" onclick="changeName()">CHANGE NAME</button>
<p id="Sample"></p>
<script>
function changeName() {
document.getElementById("RESET1").name ="RES_BTN" ;
document.getElementById("Sample").innerHTML = "리셋 버튼의 이름이 이제 RES_BTN입니다";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CHANGE NAME 버튼 클릭 후 −
코드 설명
위 예제의 동작 방식을 단계별로 살펴보겠습니다.
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 NAME 버튼 생성
다음으로, 사용자가 클릭하면 changeName() 함수를 실행하는 CHANGE NAME 버튼을 만들었습니다.
<button type="button" onclick="changeName()">CHANGE NAME</button>
3. changeName() 함수로 name 속성 변경
changeName() 함수는 getElementById() 메서드를 사용해 type이 reset인 입력 필드를 가져온 뒤, 해당 요소의 name 속성 값을 "RES_BTN"으로 설정합니다. 이 변경 사항은 id가 "Sample"인 단락(paragraph)에서 innerHTML 속성을 통해 화면에 표시됩니다.
function changeName() {
document.getElementById("RESET1").name ="RES_BTN" ;
document.getElementById("Sample").innerHTML = "리셋 버튼의 이름이 이제 RES_BTN입니다";
}정리
HTML DOM의 Input Reset name 속성을 활용하면 자바스크립트만으로 리셋 버튼의 이름을 동적으로 읽거나 변경할 수 있습니다. 서버 측에서 폼 데이터를 구분하고 처리해야 하는 상황에서 유용하게 활용할 수 있는 기능이니, 위 예제 코드를 직접 실행해 보며 익혀보시기 바랍니다.