Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML DOM 양식 객체

<시간/>

HTML DOM Form 객체는 HTML

요소와 연결됩니다. 문서 개체의 createElement() 및 getElementById() 메서드를 사용하여 양식 요소를 만들고 액세스할 수 있습니다. form 객체의 다양한 속성을 설정할 수 있고 얻을 수도 있습니다.

속성

다음은 Form 개체 속성입니다 -

속성 설명
문자 집합 수락 양식에 accept-charset 속성 값을 설정하거나 반환합니다.
액션 양식의 작업 속성 값을 설정하거나 반환하려면
자동 완성 양식의 자동 완성 속성 값을 설정하거나 반환합니다.
인코딩 enctype의 별칭일 뿐입니다.
암호화 유형 양식의 enctype 속성 값을 설정하거나 반환합니다.
길이 양식에 몇 개의 요소가 있는지 반환합니다.
방법 폼의 메소드 속성 값을 설정하거나 반환합니다.
이름 폼의 name 속성 값을 설정하거나 반환합니다.
검증 없음 사용자가 제출할 때 양식 데이터의 유효성을 검사해야 하는지 여부를 설정하거나 반환합니다.
대상 양식의 대상 속성 값을 설정하거나 반환합니다.

방법

다음은 양식 개체 메서드입니다 -

메서드 설명
재설정() 양식을 재설정하려면
제출() 양식을 제출하려면

예시

HTML DOM 양식 개체의 예를 살펴보겠습니다. -

<!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 object example</h1>
<p>Create a FORM element containing an input element by clicking the below button</p>
<button onclick="CreateForm()">CREATE</button>
<br><br>
</body>
</html>

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

HTML DOM 양식 객체

CREATE 버튼을 클릭하고 입력 필드에 무언가를 쓸 때 -

HTML DOM 양식 객체

위의 예에서 -

사용자가 클릭하면 createForm() 메서드를 실행하는 CREATE 버튼을 만들었습니다. −

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

CreateForm() 메서드는 문서 객체의 createElement() 메서드를 사용하여 요소를 만들고 변수 f에 할당합니다. 그런 다음 양식 요소는 appendChild() 메서드를 사용하여 문서 본문에 추가됩니다. 그런 다음 createElement() 메서드를 사용하여 입력 요소를 만들고 setAttribute() 메서드를 사용하여 값이 "password"인 유형 속성을 만듭니다.

setAttribute() 메서드는 속성이 이전에 존재하지 않는 경우 속성을 생성합니다. 마지막으로 양식 요소에서 appendChild() 메서드를 사용하고 입력 요소를 매개변수로 전달하면 입력 요소를 양식 요소의 자식으로 추가합니다 -

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