HTML DOM Input Password placeholder 속성 완벽 가이드

HTML DOM Input Password placeholder 속성이란?

HTML DOM의 Input Password placeholder 속성은 비밀번호 입력 필드(type="password")의 placeholder(자리 표시자) 속성 값을 설정하거나 반환하는 데 사용됩니다.

placeholder 속성은 사용자가 아무 값도 입력하기 전에 입력 필드 내부에 힌트 텍스트를 미리 보여줌으로써, 어떤 값을 입력해야 하는지 안내하는 역할을 합니다. 이 텍스트는 기본적으로 회색으로 표시되며, value 속성과 달리 실제 입력값으로 간주되지 않아 폼 전송 시 함께 제출되지 않는다는 점이 특징입니다.

문법(Syntax)

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

passwordObject.placeholder = text

여기서 text는 사용자에게 비밀번호 입력 방식을 알려주는 힌트 역할을 하는 자리 표시자 텍스트입니다.

예제

입력 비밀번호 placeholder 속성의 실제 동작을 확인할 수 있는 예제입니다.

<!DOCTYPE html>
<html>
<body>
<h1>password placeholder property</h1>
Password: <input type="password" id="PASS1" placeholder="....">
<p>아래 버튼을 클릭하면 위 입력 필드의 placeholder 텍스트가 변경됩니다</p>
<button onclick="changeHolder()">CHANGE</button>
<script>
    function changeHolder() {
        document.getElementById("PASS1").placeholder = "Enter your password here..";
    }
</script>
</body>
</html>

실행 결과

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

HTML DOM Input Password placeholder 속성 완벽 가이드

그리고 CHANGE 버튼을 클릭하면 아래와 같이 placeholder 텍스트가 즉시 변경됩니다.

HTML DOM Input Password placeholder 속성 완벽 가이드

코드 상세 설명

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

먼저 id가 PASS1이고 placeholder 속성 값이 ....로 지정된 비밀번호 입력 필드를 생성했습니다.

Password: <input type="password" id="PASS1" placeholder="....">

다음으로, 사용자가 클릭하면 changeHolder() 함수를 실행하는 CHANGE 버튼을 추가했습니다.

<button onclick="changeHolder()">CHANGE</button>

changeHolder() 함수는 getElementById() 메서드를 통해 해당 비밀번호 입력 요소를 찾아낸 뒤, placeholder 속성 값을 Enter your password here..로 변경합니다. 이 변경 사항은 곧바로 비밀번호 필드에 반영되어 화면에 그대로 나타납니다.

function changeHolder() {
    document.getElementById("PASS1").placeholder = "Enter your password here..";
}

참고 사항

placeholder 속성은 JavaScript를 통해 언제든 읽고 쓸 수 있으므로, 유효성 검사 실패 시 안내 문구를 바꾸는 것처럼 동적으로 힌트 텍스트를 변경하는 UI에도 활용할 수 있습니다. 다만 placeholder는 라벨(label)을 대체할 수 없으므로, 접근성을 위해 별도의 <label> 요소를 함께 사용하는 것이 좋습니다.