HTML DOM Input Password type 속성 완벽 정리

HTML DOM에서 Input Password의 type 속성은 type="password"로 설정된 input 요소와 연결된 속성입니다. 이 속성은 비밀번호 입력 필드에 대해 항상 "password"라는 값을 반환하며, 자바스크립트로 특정 입력 요소의 유형을 확인할 때 유용하게 사용됩니다.

문법(Syntax)

비밀번호 입력 필드의 type 속성을 사용하는 기본 문법은 다음과 같습니다.

passwordObject.type

예제(Example)

아래 예제를 통해 Input Password type 속성이 실제로 어떻게 동작하는지 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h1>password type property</h1>
PASSWORD: <input type="password" id="PASS1">
<p>아래 버튼을 클릭하면 위 요소의 타입을 확인할 수 있습니다</p>
<button onclick="getType()">Get Type</button>
<p id="Sample"></p>
<script>
    function getType() {
        var t = document.getElementById("PASS1").type;
        document.getElementById("Sample").innerHTML = "The type for the input field is : "+t;
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM Input Password type 속성 완벽 정리

"Get Type" 버튼을 클릭하면 아래와 같은 결과가 표시됩니다.

HTML DOM Input Password type 속성 완벽 정리

코드 상세 설명

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

1. 비밀번호 입력 필드 생성

먼저 type이 password로 지정된 입력 필드를 생성하고, id를 "PASS1"으로 설정했습니다.

PASSWORD: <input type="password" id="PASS1">

2. 버튼 생성 및 이벤트 연결

그다음 "Get Type" 버튼을 만들고, 사용자가 클릭했을 때 getType() 함수가 실행되도록 onclick 이벤트를 연결했습니다.

<button onclick="getType()">Get Type</button>

3. getType() 함수의 동작 원리

getType() 함수는 getElementById() 메서드를 사용해 id가 "PASS1"인 input 요소에 접근한 뒤, 해당 요소의 type 속성값을 변수 t에 저장합니다. 이후 innerHTML 속성을 통해 그 값을 id가 "Sample"인 문단(paragraph)에 출력합니다.

function getType() {
    var t = document.getElementById("PASS1").type;
    document.getElementById("Sample").innerHTML = "The type for the input field is : "+t;
}

버튼을 클릭하면 화면에 "The type for the input field is : password"라는 문구가 표시되며, 이를 통해 해당 입력 필드가 비밀번호 타입임을 확인할 수 있습니다.