HTML DOM 입력 검색(Input Search) placeholder 속성 완벽 정리

HTML DOM Input Search placeholder 속성이란?

HTML DOM의 Input Search placeholder 속성은 검색 입력 필드(input type="search")의 placeholder 속성값을 설정하거나 반환하는 데 사용되는 JavaScript 속성입니다.

placeholder 속성은 사용자가 아무것도 입력하기 전에 입력 필드 내부에 힌트 텍스트를 표시함으로써, 해당 필드에 어떤 값을 입력해야 하는지 웹 페이지 방문자에게 안내하는 역할을 합니다. 기본적으로 placeholder 텍스트는 회색으로 표시되며, value 속성과 달리 폼(form) 제출 시에는 서버로 전송되지 않는다는 점이 특징입니다.

문법(Syntax)

placeholder 속성 설정하기

searchObject.placeholder = text

여기서 text는 검색 필드에 대한 힌트 역할을 하는 placeholder 텍스트를 의미합니다.

placeholder 속성 값 가져오기

searchObject.placeholder

매개변수 없이 호출하면 현재 설정된 placeholder 텍스트를 문자열로 반환합니다.

예제(Example)

다음은 input search placeholder 속성을 활용한 예제입니다. 버튼을 클릭하면 검색 필드의 placeholder 텍스트가 동적으로 변경됩니다.

<!DOCTYPE html>
<html>
<body>
<h1>Search placeholder property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits">
</form>
<p>아래 버튼을 클릭하면 위 필드의 placeholder 텍스트가 변경됩니다.</p>
<button onclick="changeHolder()">CHANGE</button>
<script>
    function changeHolder() {
        document.getElementById("SEARCH1").placeholder = "Search for the fruits here..";
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM 입력 검색(Input Search) placeholder 속성 완벽 정리

CHANGE 버튼을 클릭한 후의 결과는 다음과 같습니다. 검색 필드의 placeholder 텍스트가 "Search for the fruits here.."로 바뀐 것을 확인할 수 있습니다.

HTML DOM 입력 검색(Input Search) placeholder 속성 완벽 정리

정리

placeholder 속성은 JavaScript를 통해 동적으로 읽고 쓸 수 있어, 상황에 따라 입력 필드의 안내 문구를 유연하게 변경하는 UI를 구현할 때 매우 유용합니다. 다만 placeholder는 실제 입력값이 아니므로 중요한 정보를 대체하지 않도록 주의해야 합니다.