자바스크립트의 document.forms 속성을 사용하면 문서 안에 포함된 <form> 태그의 개수를 간단하게 확인할 수 있습니다. 이 속성은 현재 문서에 존재하는 모든 폼 요소를 HTMLCollection 형태로 반환하기 때문에, length 프로퍼티만으로 전체 폼의 개수를 바로 알아낼 수 있습니다.
document.forms 속성이란?
document.forms는 웹 문서 내의 모든 <form> 요소를 담고 있는 컬렉션입니다. 인덱스 번호(document.forms[0])나 name 속성을 이용해 특정 폼에 접근할 수 있으며, 폼이 몇 개 있는지 파악해야 할 때는 length 속성을 활용하면 됩니다.
예제
아래 코드를 실행하면 document.forms 속성을 활용해 문서 내 폼의 개수를 출력하는 과정을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<h1>직원 정보</h1>
<form>
이름: <input type="text" name="name" value="Amit"><br>
과목: <input type="text" name="sub" value="Java">
</form>
<h1>부서 정보</h1>
<form>
부서 ID: <input type="text" name="dptid" value="D001"><br>
부서명: <input type="text" name="dname" value="Marketing">
</form>
<script>
var num = document.forms.length;
document.write("<br>폼은 몇 개일까요? "+num);
</script>
</body>
</html>
실행 결과
위 예제에는 '직원 정보'와 '부서 정보' 두 개의 <form> 태그가 정의되어 있습니다. 따라서 페이지를 열면 스크립트가 실행되면서 다음과 같은 문구가 화면에 표시됩니다.
폼은 몇 개일까요? 2
이처럼 document.forms.length를 사용하면 별도의 복잡한 로직 없이도 문서 내 폼의 개수를 즉시 파악할 수 있어, 동적으로 폼을 관리하거나 유효성 검사를 구현할 때 유용하게 활용됩니다.