HTML DOM의 forms 컬렉션은 HTML 문서 내에 존재하는 모든 <form> 요소를 하나의 컬렉션 형태로 반환하는 기능입니다. 컬렉션에 포함된 요소들은 문서에 나타난 순서대로 정렬되어 제공되므로, 인덱스를 통해 문서 구조 그대로 폼에 접근할 수 있습니다.
forms 컬렉션의 주요 속성
forms 컬렉션에서 사용할 수 있는 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| length | 읽기 전용 속성으로, 컬렉션에 포함된 <form> 요소의 개수를 반환합니다. |
forms 컬렉션의 주요 메서드
forms 컬렉션에서 활용할 수 있는 메서드는 아래와 같습니다.
| 메서드 | 설명 |
|---|---|
| [index] | 지정한 인덱스 위치의 <form> 요소를 반환합니다. 인덱스는 0부터 시작하며, 범위를 벗어나면 null을 반환합니다. |
| item(index) | 지정한 인덱스 위치의 <form> 요소를 반환합니다. 인덱스는 0부터 시작하며, 범위를 벗어나면 null을 반환합니다. |
| namedItem(id) | 지정한 id와 일치하는 <form> 요소를 반환합니다. 해당 id가 존재하지 않으면 null을 반환합니다. |
문법
HTML DOM forms 컬렉션의 기본 문법은 다음과 같습니다.
document.forms
예제 코드
이제 forms 컬렉션의 실제 사용 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<script>
function formCollect() {
for(var i=0;i<document.forms.length;i++){
var no=document.forms[i].id+"<br>";
document.getElementById("Sample").innerHTML +=no;
}
}
</script>
</head>
<body>
<h1>Forms collection example</h1>
<form id="FORM1">
Fruit <input type="text" name="fname" value="Mango">
</form>
<form id="FORM2">
Age <input type="text" name="Age" value="22">
</form>
<form id="FORM3">
Password: <input type="password" name="pass" value="test">
</form>
<br>
<button onclick="formCollect()">GET IDS</button>
<p id="Sample">Following are the form ids <br></p>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
여기서 GET IDS 버튼을 클릭하면 결과가 아래처럼 표시됩니다.
코드 상세 분석
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
먼저 각각 "FORM1", "FORM2", "FORM3"라는 id를 가진 세 개의 폼을 생성했습니다. 첫 번째와 두 번째 폼에는 type이 text인 input 요소가, 세 번째 폼에는 type이 password인 input 요소가 포함되어 있습니다.
<form id="FORM1"> Fruit <input type="text" name="fname" value="Mango" > </form> <form id="FORM2"> Age <input type="text" name="Age" value="22" > </form> <form id="FORM3"> Password: <input type="password" name="pass" value="test"> </form>
사용자가 GET IDS 버튼을 클릭하면 formCollect() 함수가 실행됩니다.
<button onclick="formCollect()">GET IDS</button>
formCollect() 함수는 먼저 document.forms의 length 속성값(이 예제에서는 3)을 가져와 for 반복문의 조건식에 사용합니다. 이후 인덱스 번호로 각 폼 요소에 접근해 해당 id 값을 추출하고, 이를 id가 "Sample"인 단락(<p>)에 추가하여 화면에 출력합니다.
function formCollect() {
for(var i=0;i<document.forms.length;i++){
var no=document.forms[i].id+"<br>";
document.getElementById("Sample").innerHTML +=no;
}
}이처럼 forms 컬렉션을 활용하면 문서 내 모든 폼을 손쉽게 순회하면서 필요한 정보를 동적으로 처리할 수 있습니다.