HTML DOM 비밀번호 입력(Input Password) 객체 완벽 가이드

HTML DOM의 Input Password(비밀번호 입력) 객체는 type 속성이 "password"로 지정된 <input> 요소와 연결됩니다. 자바스크립트에서는 createElement() 메서드로 새로운 비밀번호 입력 필드를 생성할 수 있고, getElementById() 메서드로 기존에 존재하는 비밀번호 입력 요소에 접근할 수 있습니다.

비밀번호 입력 객체의 주요 속성(Properties)

다음은 비밀번호 입력 객체에서 사용할 수 있는 주요 속성 목록입니다.

번호	속성 및 설명
1	autocomplete 비밀번호 필드의 autocomplete 속성값을 설정하거나 반환합니다.
2	autofocus 페이지가 로드될 때 해당 비밀번호 필드가 자동으로 포커스를 받을지 여부를 설정하거나 반환합니다.
3	defaultValue 비밀번호 필드의 기본값(default value)을 설정하거나 반환합니다.
4	disabled 비밀번호 필드가 비활성화(disabled) 상태인지 여부를 설정하거나 반환합니다.
5	form 해당 비밀번호 필드를 포함하고 있는 폼(form)의 참조를 반환합니다.
6	maxLength 비밀번호 필드에 입력할 수 있는 최대 문자 수(maxlength 속성값)를 설정하거나 반환합니다.
7	name 비밀번호 필드의 name 속성값을 설정하거나 반환합니다.
8	pattern 비밀번호 필드의 pattern 속성값(입력 형식 검증용 정규식)을 설정하거나 반환합니다.
9	placeholder 비밀번호 필드의 placeholder(안내 문구) 속성값을 설정하거나 반환합니다.
10	readOnly 비밀번호 필드가 읽기 전용(read-only)인지 여부를 설정하거나 반환합니다.
11	required 폼 제출 시 비밀번호 필드 입력이 필수인지 여부를 설정하거나 반환합니다.
12	size 비밀번호 필드의 크기(size 속성값)를 설정하거나 반환합니다.
13	type 읽기 전용 속성으로, 해당 폼 요소의 유형(type)을 반환합니다.
14	value 비밀번호 필드의 value 속성값을 설정하거나 반환합니다.

메서드(Methods)

비밀번호 입력 객체에서 제공하는 메서드는 다음과 같습니다.

번호	메서드 및 설명
1	select() 비밀번호 필드의 내용을 선택(select)합니다.

문법(Syntax)

새로운 비밀번호 입력 객체를 생성하는 문법은 다음과 같습니다.

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

예제 코드

아래 예제는 버튼 클릭 시 type이 password인 input 요소를 동적으로 생성하는 코드입니다.

<!DOCTYPE html>
<html>
<head>
<script>
   function createPASS() {
      var P = document.createElement("INPUT");
      P.setAttribute("type", "password");
      document.body.appendChild(P);
   }
</script>
</head>
<body>
<p>아래 버튼을 클릭하면 type이 password인 입력 필드가 생성됩니다.</p>
<button onclick="createPASS()">CREATE</button>
<br><br>
PASSWORD:
</body>
</html>

실행 결과

위 코드를 실행하면 화면에 CREATE 버튼이 나타납니다.

HTML DOM 비밀번호 입력(Input Password) 객체 완벽 가이드

CREATE 버튼을 클릭한 후 새로 생성된 비밀번호 필드에 텍스트를 입력하면, 입력 내용이 마스킹 처리되어 표시되는 것을 확인할 수 있습니다.

HTML DOM 비밀번호 입력(Input Password) 객체 완벽 가이드

코드 설명

위 예제의 동작 원리를 단계별로 살펴보겠습니다.

먼저, 사용자가 클릭하면 createPASS() 함수를 실행하는 CREATE 버튼이 배치되어 있습니다.

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

createPASS() 함수 내부에서는 document.createElement() 메서드에 "INPUT"을 매개변수로 전달하여 <input> 요소를 생성합니다. 새로 만들어진 input 요소는 변수 P에 할당되며, 이어서 setAttribute() 메서드를 통해 type 속성을 password 값으로 지정합니다. 참고로 setAttribute()는 해당 속성이 기존에 존재하지 않으면 속성을 새로 생성한 후 값을 할당합니다. 마지막으로 document.body에 appendChild() 메서드를 호출하여, type이 password인 input 요소를 body의 자식 노드로 추가합니다.

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