HTML DOM 폼(Form) 객체 완벽 정리 – 주요 속성, 메서드와 활용 예제

HTML DOM의 Form 객체는 HTML <form> 요소와 연결되어 있습니다. document 객체가 제공하는 createElement() 메서드로 새로운 폼을 만들거나, getElementById() 메서드로 기존 폼에 접근할 수 있습니다. 또한 Form 객체의 다양한 속성을 읽고 설정하여 폼을 동적으로 제어할 수 있습니다.

Form 객체의 주요 속성

Form 객체에서 사용할 수 있는 대표적인 속성은 다음과 같습니다.

속성	설명
acceptCharset	폼의 accept-charset 속성값을 설정하거나 반환합니다.
action	폼 데이터를 전송할 대상 URL인 action 속성값을 설정하거나 반환합니다.
autocomplete	폼의 자동 완성 기능 사용 여부를 나타내는 autocomplete 속성값을 설정하거나 반환합니다.
encoding	enctype 속성의 별칭(alias)으로, enctype과 동일하게 동작합니다.
enctype	폼 데이터를 서버로 전송할 때 사용하는 인코딩 방식을 지정하는 enctype 속성값을 설정하거나 반환합니다.
length	폼 내부에 포함된 요소(element)의 개수를 반환합니다.
method	데이터 전송 방식(GET/POST)을 지정하는 method 속성값을 설정하거나 반환합니다.
name	폼의 이름을 나타내는 name 속성값을 설정하거나 반환합니다.
noValidate	사용자가 폼을 제출할 때 데이터 유효성 검사를 수행하지 않도록 설정하거나 그 여부를 반환합니다.
target	폼 제출 후 응답을 표시할 위치를 지정하는 target 속성값을 설정하거나 반환합니다.

Form 객체의 주요 메서드

Form 객체에서 제공하는 메서드는 다음 두 가지입니다.

메서드	설명
reset()	폼의 모든 입력 필드를 초기 상태로 되돌립니다.
submit()	폼을 프로그래밍 방식으로 제출합니다.

예제: 폼 객체로 동적으로 폼 생성하기

HTML DOM Form 객체를 활용하는 실제 예제를 살펴보겠습니다. 아래 코드는 버튼을 클릭하면 비밀번호 입력 필드를 포함한 폼을 동적으로 생성합니다.

<!DOCTYPE html>
<html>
<head>
<script>
    function CreateForm() {
        var f = document.createElement("FORM");
        document.body.appendChild(f);
        var i = document.createElement("INPUT");
        i.setAttribute("type", "password");
        f.appendChild(i);
    }
</script>
</head>
<body>
<h1>Form 객체 예제</h1>
<p>아래 버튼을 클릭하면 input 요소를 포함하는 FORM 요소가 생성됩니다.</p>
<button onclick="CreateForm()">CREATE</button>
<br><br>
</body>
</html>

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

HTML DOM 폼(Form) 객체 완벽 정리 – 주요 속성, 메서드와 활용 예제

CREATE 버튼을 클릭하고 입력 필드에 값을 작성하면 아래와 같이 표시됩니다.

HTML DOM 폼(Form) 객체 완벽 정리 – 주요 속성, 메서드와 활용 예제

코드 설명

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

먼저, 클릭 시 CreateForm() 함수를 실행하는 CREATE 버튼을 만듭니다.

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

CreateForm() 함수는 document 객체의 createElement() 메서드를 사용해 <form> 요소를 생성한 뒤 변수 f에 할당합니다. 이후 appendChild() 메서드를 통해 생성된 폼 요소를 문서의 body에 추가합니다.

다음으로 같은 방식으로 input 요소를 생성하고, setAttribute() 메서드를 사용해 type 속성을 "password" 값으로 지정합니다. 참고로 setAttribute() 메서드는 해당 속성이 존재하지 않으면 새로 생성하고, 이미 존재하면 값을 갱신합니다.

마지막으로 폼 요소에 대해 appendChild() 메서드를 호출하고 input 요소를 인수로 전달하여, input 요소를 폼의 자식 요소로 추가합니다.