HTML DOM에서 Input Reset의 form 속성은 해당 리셋(reset) 버튼을 포함하고 있는 폼(form)의 참조를 반환하는 데 사용됩니다. 만약 리셋 버튼이 폼 외부에 위치해 있다면 NULL을 반환합니다. 이 속성은 읽기 전용(read-only)이므로 값을 직접 변경할 수 없습니다.
문법(Syntax)
Input Reset form 속성의 기본 문법은 다음과 같습니다.
resetObject.form
예제(Example)
Input Reset form 속성의 실제 사용 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input reset form Property</h1>
<form id="FORM_1" 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>아래 버튼을 클릭하면 폼의 id를 확인할 수 있습니다.</p>
<button type="button" onclick="formId()">GET FORM</button>
<p id="Sample"></p>
<script>
function formId() {
var P=document.getElementById("RESET1").form.id;
document.getElementById("Sample").innerHTML = "리셋 버튼을 포함하는 폼의 id는: "+P ;
}
</script>
</body>
</html>위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
GET FORM 버튼을 클릭한 후의 결과입니다.
코드 상세 설명
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
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. GET FORM 버튼 생성
다음으로 사용자가 클릭하면 formId() 함수를 실행하는 GET FORM 버튼을 만들었습니다.
<button type="button" onclick="formId()">GET FORM</button>
3. formId() 함수 구현
formId() 함수는 getElementById() 메서드를 사용하여 type이 reset인 input 요소를 가져온 뒤, 해당 리셋 버튼을 포함하는 폼 객체의 id 속성 값을 읽어옵니다. 그런 다음 이 값을 변수 P에 저장하고, innerHTML 속성을 통해 id가 "Sample"인 단락(paragraph)에 출력합니다.
function formId() {
var P=document.getElementById("RESET1").form.id;
document.getElementById("Sample").innerHTML = "리셋 버튼을 포함하는 폼의 id는: "+P ;
}정리
Input Reset의 form 속성은 JavaScript에서 특정 리셋 버튼이 어느 폼에 속해 있는지 동적으로 확인해야 할 때 유용하게 활용됩니다. 폼 유효성 검사나 동적 UI 처리 시 부모 폼 정보에 접근할 수 있는 간편한 방법을 제공하며, 리셋 버튼이 어떤 폼에도 속하지 않는 경우에는 null이 반환된다는 점을 기억해 두면 좋습니다.