HTML DOM의 Form length 속성은 폼(<form>) 요소 내부에 포함된 요소(element)의 개수를 반환하는 속성입니다. 이 속성은 읽기 전용(read-only)이므로 스크립트에서 직접 값을 수정할 수 없으며, 폼 안에 몇 개의 컨트롤이 있는지 확인하는 용도로만 사용됩니다.
구문
Form length 속성의 기본 구문은 다음과 같습니다.
formObject.length
예제
버튼을 클릭하면 폼 내부의 요소 개수가 화면에 표시되는 간단한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
form{
border:2px solid blue;
margin:2px;
padding:4px;
}
</style>
<script>
function getLength() {
var len=document.getElementById("FORM1").length;
document.getElementById("Sample").innerHTML="폼 내부의 요소 개수 : "+len;
}
</script>
</head>
<body>
<h1>Form length 속성 예제</h1>
<form id="FORM1">
<label>사용자 이름 <input type="text" name="usrN"></label> <br><br>
<label>비밀번호 <input type="password" name="pass"></label> <br><br>
<select name="Fruit">
<option value="Mango">망고</option>
<option value="Litchi">리치</option>
<option value="Guava">구아바</option>
</select>
</form>
<br>
<p>아래 버튼을 클릭하면 위 폼에 포함된 요소의 개수를 확인할 수 있습니다.</p>
<button onclick="getLength()">요소 개수 확인</button>
<p id="Sample"></p>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.
'요소 개수 확인(get Length)' 버튼을 클릭하면 아래와 같이 폼 내부 요소의 개수가 표시됩니다.
코드 상세 설명
예제의 동작 흐름을 단계별로 살펴보겠습니다.
1. 폼 생성 : 먼저 id가 'FORM1'인 폼을 만들었습니다. 이 폼에는 텍스트 타입 입력 필드 한 개, 패스워드 타입 입력 필드 한 개, 그리고 드롭다운 목록을 만들기 위한 <select> 요소 한 개가 포함되어 있습니다. 즉, 폼 내부의 전체 요소 개수는 3개입니다.
<form id="FORM1"> <label>사용자 이름 <input type="text" name="usrN"></label> <br><br> <label>비밀번호 <input type="password" name="pass"></label> <br><br> <select name="Fruit"> <option value="Mango">망고</option> <option value="Litchi">리치</option> <option value="Guava">구아바</option> </select> </form>
2. 버튼 생성 : 사용자가 클릭하면 getLength() 함수를 실행하는 '요소 개수 확인' 버튼을 추가했습니다.
function getLength() {
var len=document.getElementById("FORM1").length;
document.getElementById("Sample").innerHTML="폼 내부의 요소 개수 : "+len;
}
3. 함수 동작 : getLength() 함수는 document 객체의 getElementById() 메서드를 사용해 <form> 요소를 가져온 뒤, 해당 요소의 length 속성값을 변수 len에 저장합니다. 폼 안에는 3개의 요소가 있으므로 결과값으로 3이 반환되며, 이 값은 innerHTML 속성을 통해 id가 'Sample'인 문단에 출력됩니다.
참고로 length 속성은 input, select, textarea, button, fieldset, object, output처럼 폼에 포함된 컨트롤만을 대상으로 개수를 계산합니다. 따라서 폼 컨트롤이 아닌 일반 텍스트나 이미지 등은 개수에 포함되지 않는다는 점을 기억해 두면 좋습니다.