HTML DOM Input Reset 객체 완벽 가이드 – 주요 속성과 활용 예제

HTML DOM의 Input Reset 객체는 type 속성이 "reset"으로 지정된 <input> 요소와 연관된 객체입니다. 자바스크립트에서는 createElement() 메서드로 새로운 리셋 버튼을 생성하고, getElementById() 메서드로 이미 존재하는 요소에 접근할 수 있습니다.

Input Reset 객체의 주요 속성

Input Reset 객체에서 사용할 수 있는 주요 속성은 다음과 같습니다.

속성	설명
autofocus	페이지가 로드될 때 리셋 버튼이 자동으로 포커스를 받을지 여부를 설정하거나 반환합니다.
defaultValue	리셋 버튼의 기본값(default value)을 설정하거나 반환합니다.
disabled	리셋 버튼이 비활성화되어 있는지 여부를 설정하거나 반환합니다.
form	리셋 버튼을 포함하고 있는 폼(form)의 참조를 반환합니다.
name	리셋 버튼의 name 속성값을 설정하거나 반환합니다.
type	리셋 버튼의 폼 요소 타입을 반환합니다.
value	리셋 버튼의 value 속성값을 설정하거나 반환합니다.

예제

이제 Input Reset 객체를 활용한 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<script>
    function resetCreate() {
        var Res = document.createElement("INPUT");
        Res.setAttribute("type", "reset");
        document.body.appendChild(Res);
    }
</script>
</head>
<body>
<h1>Input Reset 객체</h1>
<p>아래 버튼을 클릭하면 type이 reset인 입력 필드가 생성됩니다.</p>
<button onclick="resetCreate()">CREATE</button>
<br><br>
</body>
</html>

실행 결과

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

HTML DOM Input Reset 객체 완벽 가이드 – 주요 속성과 활용 예제

CREATE 버튼을 클릭하면 아래와 같이 리셋 버튼이 동적으로 추가됩니다.

HTML DOM Input Reset 객체 완벽 가이드 – 주요 속성과 활용 예제

예제 코드 분석

위 예제의 동작 원리를 단계별로 살펴보겠습니다.

먼저, 사용자가 클릭하면 resetCreate() 함수를 실행하는 CREATE 버튼을 만들었습니다.

<button onclick="resetCreate()">CREATE</button>

resetCreate() 함수는 document 객체의 createElement() 메서드에 "INPUT"을 매개변수로 전달하여 <input> 요소를 생성합니다. 새로 만들어진 input 요소는 변수 Res에 할당되며, 이어서 setAttribute() 메서드를 통해 값이 "reset"인 type 속성을 지정합니다.

여기서 기억할 점은, setAttribute()는 해당 속성이 이전에 존재하지 않으면 새로 생성한 뒤 값을 할당한다는 것입니다. 마지막으로 document의 body에 appendChild() 메서드를 호출하여 type이 reset인 input 요소를 body의 자식 노드로 추가합니다.

function resetCreate() {
    var Res = document.createElement("INPUT");
    Res.setAttribute("type", "reset");
    document.body.appendChild(Res);
}

이처럼 HTML DOM의 Input Reset 객체를 활용하면 폼을 초기화하는 리셋 버튼을 동적으로 생성하고 제어할 수 있습니다.