HTML placeholder 속성은 사용자가 아무것도 입력하기 전까지 input 또는 textarea 요소 안에 미리 보여지는 힌트 텍스트를 지정합니다. 이 텍스트는 사용자가 필드를 클릭하고 입력을 시작하면 자동으로 사라지므로, 어떤 정보를 입력해야 하는지 직관적으로 안내하는 역할을 합니다.
기본 문법
placeholder 속성의 기본 문법은 다음과 같습니다.
<tagname placeholder="text"></tagname>
사용 예제
다음 예제는 두 개의 텍스트 입력 필드에 placeholder 속성을 적용한 모습입니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
</style>
<body>
<h1>HTML placeholder Demo</h1>
<input type="text" placeholder='Enter your first name'>
<input type="text" placeholder='Enter your last name'>
</body>
</html>실행 결과
위 코드를 실행하면 각 입력 필드에 'Enter your first name', 'Enter your last name'이라는 힌트 텍스트가 연한 회색으로 표시됩니다. 사용자가 필드를 클릭해 입력을 시작하면 해당 텍스트는 자동으로 사라집니다.
placeholder 속성 활용 시 주의 사항
- label의 대체재가 아닙니다. placeholder는 입력이 시작되면 사라지기 때문에 스크린 리더 사용자나 폼 작성 중인 사용자에게 불편을 줄 수 있습니다. 접근성을 위해 반드시 별도의 <label> 요소를 함께 사용하는 것이 좋습니다.
- 적용 가능한 요소가 제한적입니다. placeholder는 input 요소 중에서도 text, search, url, tel, email, password 타입과 textarea 요소에서만 동작합니다.
- CSS로 스타일링할 수 있습니다.
::placeholder가상 요소를 사용하면 힌트 텍스트의 색상, 글꼴 크기 등을 자유롭게 변경할 수 있습니다.
이처럼 placeholder 속성은 폼 디자인에서 사용자 경험을 높이는 간단하지만 유용한 도구입니다. 단, 필수 정보 전달보다는 보조적인 안내 용도로 활용하는 것이 바람직합니다.