HTML <input> placeholder 속성 완벽 정리

HTML의 <input> 요소에서 사용하는 placeholder 속성은 해당 입력 필드에 어떤 값을 입력해야 하는지 사용자에게 짧은 힌트를 보여주는 기능입니다. 웹 페이지에 방문한 사용자가 입력란을 클릭하기 전에도 힌트가 미리 표시되어 있어, 폼 작성 시 혼동을 줄이고 사용자 경험(UX)을 크게 향상시킬 수 있습니다.

placeholder 속성은 다음과 같은 input 타입에서 동작합니다.

text
url
search
email
password
tel

이 속성은 HTML5에서 새롭게 도입되었으며, 그 이전 버전의 HTML에서는 지원되지 않습니다.

placeholder 속성 기본 문법

<input placeholder="placeholder_text">

여기서 placeholder_text는 사용자에게 보여질 짧은 힌트 문자열입니다. 사용자가 해당 웹 페이지에 접속하면 입력 필드 안에 이 텍스트가 회색으로 표시되며, 실제로 값을 입력하기 시작하면 자동으로 사라집니다.

placeholder 속성 활용 예제

이제 <input> 요소의 placeholder 속성을 실제로 구현한 예제를 살펴보겠습니다.

예제 코드

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
   Id − <input type="text" name="id" placeholder="Enter UserId here..."><br>
   Password − <input type="password" name="pwd" placeholder="Enter password here..."><br>
   DOB − <input type="date" name="dob"><br>
   Telephone − <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
   Email − <input type="email" name="email" placeholder="Enter email here..."><br><br>
   <button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>

실행 결과

HTML input placeholder 속성 완벽 정리 – 사용법과 예제 코드

예제 코드 분석

위 예제는 여러 개의 입력 필드로 구성된 회원가입 폼입니다.

<form action="" method="get">
   Id − <input type="text" name="id" placeholder="Enter UserId here..."><br>
   Password − <input type="password" name="pwd" placeholder="Enter password here..."><br>
   DOB − <input type="date" name="dob"><br>
   Telephone − <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
   Email − <input type="email" name="email" placeholder="Enter email here..."><br><br>
   <button type="submit" value="Submit">Submit</button>
</form>

폼 내의 각 입력 필드에는 아래와 같이 placeholder가 설정되어 있습니다.

<input type="password" name="pwd" placeholder="Enter password here...">

핵심은 아주 간단합니다. placeholder 속성만 추가하고 원하는 힌트 문구를 값으로 지정하면 됩니다.

placeholder="Enter password here..."

정리 및 참고 사항