HTML placeholder 속성 – 올바른 이해와 사용 방법

`placeholder` 속성의 정의 및 사용법

placeholder 속성은
텍스트 박스에 값이 없을 때 사용자의 데이터 입력을 돕기 위한 짧은 힌트(단어 또는 짧은 문구)를 나타냅니다.
힌트는 샘플 값 또는 예상 형식에 대한 간략한 설명일 수 있습니다.

플레이스홀더(placeholder)란
'나중에 채워질 자리에 임시로 표시하는 내용물'을 의미합니다.
이 개념이 placeholder 속성의 이름으로 사용되었습니다.

이 속성을 사용하면, 텍스트 입력 필드가 비어 있을 때 사용자가 어떤 값을 입력해야 하는지에 대한 시각적 힌트를 텍스트로 제공합니다.
이것을 '플레이스홀더 텍스트'라고 합니다.

`placeholder` 속성을 사용하는 요소

placeholder 속성은 <input> 요소 중에서 사용자로부터 텍스트를 입력 받는 <input type="text">, <input type="password">, <input type="number">, <input type="email">, <input type="search">, <input type="tel">, <input type="url"> 타입의 입력 필드와 <textarea> 요소에서 사용됩니다.

예제

다음은 <input> 요소 중에서 사용자로부터 텍스트를 입력 받는 <input type="text">에서 placeholder 속성이 사용된 예제입니다.

다음은 여러 줄로 된 텍스트 입력 필드인 <textarea> 요소에서 placeholder 속성이 사용된 예제입니다.

플레이스홀더 텍스트는 기본 텍스트 입력 필드의 텍스트보다 낮은 색상 대비로 표시됩니다. 이는 사용자가 플레이스홀더 텍스트와 채워진 양식 필드가 무엇인지 혼동하지 않도록 의도적으로 그렇게 한 것입니다. 또한 사용자가 텍스트를 입력하기 시작하면 플레이스홀더 텍스트가 텍스트 입력 필드에서 사라집니다.

사용법 참고사항

placeholder 속성을 효과적으로 사용하려면, 긴 설명이나 추상적인 내용보다는 예상 데이터 유형을 암시하는 단어나 짧은 문구를 사용하는 것이 좋습니다.
다음의 두 가지 예시로 살펴보겠습니다.

접근성 고려사항

placeholder 속성이 해당 컨트롤의 레이블(이름표)을 대신할 수 없습니다. 즉, placeholder 속성은 양식에 입력해야 하는 데이터 유형의 예를 시각적으로 보여주는 데에만 사용해야 합니다.

컨트롤의 레이블(이름표)은 <label> 요소를 사용해야 합니다.
<label>의 텍스트는 시각적으로나 프그램적으로 해당 컨트롤과 연결됩니다. 시각장애인을 위한 스크린 리더는 기본적으로 placeholder 속성의 텍스트를 읽지 않지만, <label>의 텍스트는 읽어줍니다.

또한, <label> 요소는 포인팅 장치 사용자의 사용자 경험을 개선합니다. 사용자가 <label>을 클릭, 터치 또는 탭하면 포커스가 레이블의 연결된 해당 컨트롤로 이동합니다.