문의 폼을 깔끔하게 보이려고 라벨을 빼고 placeholder에 '이름', '연락처'만 적어 두는 경우가 많습니다. 보기에는 단정하지만, 방문자가 글자를 입력하는 순간 안내 문구가 사라져 무엇을 쓰던 칸인지 알 수 없게 됩니다.
placeholder와 label의 역할을 나누고, 좁은 모바일 화면에서도 라벨을 유지하는 방법을 정리했습니다.

1. label은 항상 두고, placeholder는 예시로만

칸의 이름은 <label>이 맡고, placeholder에는 입력 형식의 예시만 적는 것이 기본입니다. for 값과 입력창의 id를 같게 맞추면 라벨 글자를 눌러도 입력창에 커서가 들어가서, 모바일에서 누를 수 있는 영역도 넓어집니다.

<!-- 라벨은 입력창 위에 따로, for와 id로 연결 -->
<label for="phone">연락처</label>
<input type="tel" id="phone" name="phone"
       placeholder="예) 010-1234-5678">

'필수', '숫자만 입력' 같은 조건도 placeholder에 넣으면 입력과 동시에 사라집니다. 이런 안내는 라벨 옆이나 입력창 아래에 작은 글씨로 계속 보이게 두세요.

2. 공간이 좁다면 떠오르는 라벨로

한 화면에 칸이 많아 라벨 줄을 따로 두기 부담스럽다면, 처음에는 입력창 안에 있다가 입력을 시작하면 위로 작게 올라가는 방식이 있습니다. 라벨이 끝까지 화면에 남기 때문에 placeholder만 쓸 때의 문제가 생기지 않습니다.

/* 공간이 좁을 때: 입력하면 라벨이 위로 올라가는 방식 */
.field { position: relative; }
.field label {
  position: absolute; left: 12px; top: 14px;
  color: #888; transition: .2s; pointer-events: none;
}
/* placeholder는 공백 한 칸으로 넣어 둡니다 */
.field input:focus + label,
.field input:not(:placeholder-shown) + label {
  top: -9px; font-size: 12px;
  background: #fff; padding: 0 4px; color: #333;
}

핵심은 :placeholder-shown 선택자입니다. 값이 비어 있으면 placeholder가 보이는 상태로 판단하므로, placeholder를 공백 한 칸으로 넣어 두고 이 상태가 아닐 때 라벨을 올립니다. CSS의 + 선택자를 쓰기 때문에 HTML에서는 input을 label보다 먼저 적어야 합니다.

<div class="field">
  <input type="text" id="name" placeholder=" ">
  <label for="name">이름</label>
</div>

3. 적용 후 꼭 해 볼 점검

• 휴대폰에서 브라우저 자동완성으로 값을 채운 뒤에도 라벨이 겹치지 않는지 확인합니다.
• placeholder 글자가 너무 연해서 안 보이거나, 반대로 진해서 입력된 값처럼 보이지 않는지 봅니다.
• 라벨 글자를 눌렀을 때 해당 입력창으로 커서가 이동하는지 확인합니다.