HTML DOM 양식 모음

<시간/>

HTML DOM 양식 컬렉션은 HTML 문서 내부에 있는 모든 양식 요소를 컬렉션으로 반환하는 데 사용됩니다. 컬렉션에 있는 요소는 HTML 문서에 나타나는 것과 동일한 순서로 정렬되고 표시됩니다.

속성

다음은 양식 컬렉션의 속성입니다 -

속성	설명
길이	컬렉션의 요소 수를 반환하는 읽기 전용 속성입니다.

방법

다음은 양식 수집 방법입니다 -

메소드	설명
[색인]	주어진 인덱스의 컬렉션에서 요소를 반환합니다. 인덱싱은 0부터 시작하고 인덱스가 범위를 벗어나면 null이 반환됩니다.
항목(색인)	주어진 인덱스의 컬렉션에서 요소를 반환합니다. 인덱싱은 0부터 시작하고 인덱스가 범위를 벗어나면 null을 반환합니다.
namedItem(id)	주어진 ID를 가진 컬렉션에서 요소를 반환합니다. ID가 존재하지 않으면 Null이 반환됩니다.

구문

다음은 HTML DOM 양식 컬렉션의 구문입니다. -

document.forms

예시

HTML DOM 양식 컬렉션의 예를 살펴보겠습니다 -

<!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>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 양식 모음

GET IDS 버튼을 클릭하면 -

HTML DOM 양식 모음

위의 예에서 -

먼저 ID가 "FORM1","FORM2" 및 "FORM3"인 세 가지 양식을 만들었습니다. 처음 두 양식에는 텍스트 유형의 입력 요소가 있고 세 번째 양식에는 비밀번호 -

유형의 입력 요소가 있습니다.

<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() 메서드는 우리의 경우 3인 document.forms 길이 속성 값을 가져오고 for 루프 내부의 테스트 표현식에서 사용합니다. 양식 컬렉션의 색인 번호를 사용하여 ID를 얻고 ID가 "Sample"인 단락에 추가하여 표시합니다. -

function formCollect() {
   for(var i=0;i<document.forms.length;i++){
      var no=document.forms[i].id+"<br>";
      document.getElementById("Sample").innerHTML +=no;
   }
}