HTML placeholder 속성이란?
텍스트 영역(textarea)이나 입력 필드(input field)에 힌트를 표시하고 싶다면 HTML의 placeholder 속성을 활용하세요. 이 힌트는 사용자가 입력해야 할 값이 무엇인지 미리 알려주는 역할을 하며, 실제로 값이 입력되기 전까지 화면에 표시됩니다.
예를 들어 이름, 비밀번호, 상세 정보 등 입력 항목의 형식이나 내용을 안내할 때 유용하게 사용할 수 있습니다. placeholder는 필수 입력 사항이 아니라 참고용 안내 문구이므로, 사용자가 값을 입력하는 순간 자동으로 사라집니다.
placeholder 속성 예제
아래 코드를 실행하면 placeholder 속성이 HTML에서 어떻게 동작하는지 직접 확인할 수 있습니다. 회원가입 폼의 아이디와 비밀번호 입력란에 각각 힌트가 표시되도록 구성했습니다.
<!DOCTYPE html> <html> <body> <h2>Register</h2> <form action="/new.php"> <input type="text" placeholder="Student UserName" name="name"/><br> <input type="password" placeholder="Password" name="password"> <br><br> <input type="submit" value="Submit"> </form> </body> </html>
실행 결과
위 코드를 브라우저에서 열면 'Register' 제목과 함께 두 개의 입력 필드가 나타납니다. 첫 번째 텍스트 입력란에는 Student UserName, 두 번째 비밀번호 입력란에는 Password라는 힌트가 회색 글씨로 표시됩니다. 사용자가 해당 필드를 클릭해 값을 입력하기 시작하면 placeholder 텍스트는 자동으로 사라지고 실제 입력값만 남게 됩니다.
placeholder 사용 시 주의사항
- placeholder는 label 요소를 대체할 수 없습니다. 접근성을 위해 반드시 별도의 label을 함께 사용하는 것이 좋습니다.
- 스크린 리더 사용자나 인지 능력이 낮은 사용자에게는 placeholder만으로 충분한 안내가 되지 않을 수 있습니다.
- 중요한 정보나 긴 설명은 placeholder 대신 폼 하단의 도움말 텍스트로 제공하는 것이 바람직합니다.