HTML DOM 입력 텍스트(placeholder) 속성 완벽 정리

HTML DOM의 Input Text placeholder 속성은 입력 텍스트 필드(input type="text")의 placeholder 속성 값을 설정하거나 반환하는 데 사용됩니다.

placeholder는 사용자가 아무것도 입력하기 전에 입력 필드 안에 힌트 텍스트를 미리 보여주어, 해당 입력 요소에 어떤 값을 넣어야 하는지 안내하는 역할을 합니다. 기본적으로 placeholder 텍스트는 회색으로 표시되며, value 속성과 달리 실제 폼(form) 제출 시에는 전송되지 않습니다.

문법(Syntax)

placeholder 속성 설정하기

textObject.placeholder = text

여기서 text는 사용자에게 텍스트 필드에 대한 힌트를 제공하는 placeholder 문구를 의미합니다.

placeholder 속성 값 가져오기

let hint = textObject.placeholder

이렇게 하면 현재 설정된 placeholder 문자열이 변수에 저장됩니다.

예제 코드

아래 예제는 버튼 클릭 시 입력 필드의 placeholder 텍스트를 동적으로 변경하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input Text placeholder 속성</h1>

USERNAME: <input type="text" id="USR" placeholder="....">

<p>아래 버튼을 클릭하면 위 입력 필드의 placeholder 텍스트가 변경됩니다.</p>

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

<script>
    function changeHolder() {
        document.getElementById("USR").placeholder = "Enter your username here..";
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 처음에는 입력 필드에 "...."라는 placeholder가 표시됩니다.

HTML DOM 입력 텍스트(placeholder) 속성 완벽 정리

CHANGE 버튼을 클릭하면 JavaScript의 changeHolder() 함수가 실행되어 placeholder가 "Enter your username here.."로 성공적으로 변경됩니다.

HTML DOM 입력 텍스트(placeholder) 속성 완벽 정리

정리

placeholder 속성: 입력 필드에 표시되는 힌트 텍스트를 읽거나 수정할 수 있습니다.
value와의 차이점: value는 사용자가 입력한 실제 데이터로 폼 제출 시 함께 전송되지만, placeholder는 단순한 안내 문구일 뿐 전송되지 않습니다.
활용 예: 사용자 경험(UX) 향상을 위해 입력 양식에서 어떤 형식의 데이터를 입력해야 하는지 안내할 때 유용하게 사용됩니다.