HTML DOM 입력 비밀번호(Input Password) value 속성 완벽 정리

HTML DOM 입력 비밀번호 value 속성이란?

HTML DOM의 입력 비밀번호(Input Password) value 속성은 type="password"로 설정된 input 요소와 연관된 속성입니다. 이 속성은 비밀번호 필드의 기본값을 지정하는 데 사용되며, 사용자가 입력한 값에 따라 실시간으로 변경됩니다. 즉, JavaScript를 통해 비밀번호 필드의 현재 값을 읽어오거나 새로운 값으로 설정할 수 있습니다.

구문(Syntax)

value 속성을 설정하는 기본 구문은 다음과 같습니다.

passwordObject.value = text;

여기서 text는 비밀번호 필드에 지정할 값을 의미합니다. 반대로 값을 읽어올 때는 별도의 매개변수 없이 passwordObject.value를 그대로 참조하면 됩니다.

예제(Example)

입력 비밀번호 value 속성의 실제 동작을 예제를 통해 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input password Value property</h1>
PASSWORD: <input type="password" id="PASS1">
<p>Get the above element value by clicking the below button</p>
<button onclick="getValue()">Get Value</button>
<p id="Sample"></p>
<script>
    function getValue() {
        var t = document.getElementById("PASS1").value;
        document.getElementById("Sample").innerHTML = "The value for the input field is : "+t;
    }
</script>
</body>
</html>

출력 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

HTML DOM 입력 비밀번호(Input Password) value 속성 완벽 정리

비밀번호 필드에 텍스트를 입력한 후 "Get Value" 버튼을 클릭하면, 입력한 값이 아래와 같이 화면에 표시됩니다.

HTML DOM 입력 비밀번호(Input Password) value 속성 완벽 정리

코드 상세 설명

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

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

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

다음으로 사용자가 클릭하면 getValue() 함수를 호출하는 "Get Value" 버튼을 만들었습니다.

<button onclick="getValue()">Get Value</button>

getValue() 함수는 getElementById() 메서드를 사용해 id가 "PASS1"인 입력 요소에 접근한 뒤, 해당 요소의 value 속성 값을 변수 t에 할당합니다. 만약 버튼을 클릭하기 전에 비밀번호 필드에 아무것도 입력하지 않았다면 빈 문자열("")이 반환됩니다. value 속성은 사용자의 입력에 따라 항상 최신 상태로 변경되므로, 화면에는 비밀번호 필드에 입력된 현재 값이 그대로 표시됩니다. 마지막으로 innerHTML 속성을 통해 이 변수의 내용이 id가 "Sample"인 단락(p 태그)에 출력됩니다.

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

마무리 정리

HTML DOM의 입력 비밀번호 value 속성은 비밀번호 필드의 값을 손쉽게 읽고 쓸 수 있는 방법을 제공합니다. 폼 유효성 검사, 사용자 입력 확인, 기본값 설정 등 다양한 웹 개발 상황에서 유용하게 활용할 수 있으므로, getElementById()와 함께 사용하는 패턴을 잘 익혀두시기 바랍니다.