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

HTML DOM 입력 비밀번호 객체

<시간/>

HTML DOM 입력 암호 개체는 "password" 유형의 요소와 연결됩니다. createElement() 및 getElementById() 메소드를 각각 사용하여 유형 비밀번호를 사용하여 입력 요소를 생성하고 액세스할 수 있습니다.

속성

다음은 암호 개체의 속성입니다 -

Sr.No 속성 및 설명
1 자동 완성
암호 필드의 자동 완성 속성 값을 설정하거나 반환하려면
2 자동 초점
페이지가 로드될 때 비밀번호 필드가 자동으로 포커스를 받아야 하는지 여부를 설정하거나 반환합니다.
3 기본값
비밀번호 필드 기본값을 설정하거나 반환합니다.
4 비활성화됨
비밀번호 필드의 비활성화 여부를 설정하거나 반환합니다.
5 양식
비밀번호 필드가 포함된 양식의 참조를 반환하려면
6 최대길이
비밀번호 필드의 maxlength 속성 값을 설정하거나 반환합니다.
7 이름
비밀번호 필드의 이름 속성 값으로 또는 반환
8 패턴
비밀번호 필드의 패턴 속성 값을 설정하거나 반환하려면
9 자리 표시자
비밀번호 필드의 자리 표시자 속성 값을 설정하거나 반환하려면
10 읽기 전용
비밀번호 필드가 읽기 전용인지 여부를 설정하거나 반환하려면
11 필수
양식을 제출하기 전에 비밀번호 필드를 채우는 것이 필수인지 여부를 설정하거나 반환합니다.
12 크기
비밀번호 필드의 크기 속성 값을 설정하거나 반환합니다.
13 유형
비밀번호 필드가 있는 양식 요소의 유형을 반환하는 읽기 전용 속성입니다.
14
비밀번호 필드의 값 속성 값을 설정하거나 반환합니다.

방법

다음은 암호 개체에 대한 방법입니다 -

Sr.No 방법 및 설명
1 선택()
비밀번호 필드 내용을 선택합니다.

구문

다음은 −

의 구문입니다.

입력 암호 개체 만들기 -

var P = document.createElement("INPUT");
P.setAttribute("type", "password");

Input Password 개체의 예를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<script>
   function createPASS() {
      var P = document.createElement("INPUT");
      P.setAttribute("type", "password");
      document.body.appendChild(P);
   }
</script>
</head>
<body>
<p>Create an input field with type password by clicking the below button</p>
<button onclick="createPASS()">CREATE</button>
<br><br>
PASSWORD:
</body>
</html>

출력

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

HTML DOM 입력 비밀번호 객체

CREATE 버튼을 클릭하고 새로 생성된 비밀번호 필드를 입력하면 -

HTML DOM 입력 비밀번호 객체

위의 예에서 -

사용자가 클릭하면 createPass() 메서드를 실행하는 CREATE 버튼이 있습니다 -

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

createPass() 메서드는 문서 객체의 createElement() 메서드를 사용하여 "INPUT"을 매개변수로 전달하여 요소를 생성합니다. 새로 생성된 입력 요소는 변수 P에 할당되고 setAttribute() 메서드를 사용하여 값이 password인 유형 속성을 생성합니다. setAttribute()는 속성을 생성한 다음 속성이 이전에 존재하지 않는 경우 값을 할당한다는 것을 기억하십시오. 마지막으로 문서 본문에서 appendChild() 메서드를 사용하여 본문의 자식으로 암호 유형의 입력 요소를 추가합니다. -

function createPASS() {
   var P = document.createElement("INPUT");
   P.setAttribute("type", "password");
   document.body.appendChild(P);
}