label로 칸에 이름 붙이기

라벨(label)은 칸 앞의 이름 글자를 그 칸과 짝지어 주는 요소입니다. label의 for와 칸의 id를 같게 적으면, 글자를 눌러도 칸이 골라지고 화면 읽기 프로그램이 그 글을 칸의 이름으로 읽습니다.

칸 앞에 '이름'이라고 글만 적어 두면, 화면을 보는 사람은 무엇을 치는 칸인지 압니다. 그러나 화면 읽기 프로그램은 칸에 들어갔을 때 칸 스스로 가진 이름만 알려 줄 수 있습니다. 그 이름을 칸에 붙이는 것이 라벨입니다. 이 레슨에서는 라벨이 칸에 이름을 붙이는 두 가지 꼴과, 칸 안의 회색 보기 글(placeholder)이 라벨을 대신하지 못하는 까닭을 봅니다.

<label for="nick">이름</label><input  id="nick"  name="nickname"/>

1라벨 글이 칸의 읽는 이름이 된다

먼저 칸 앞에 글만 적은 코드입니다.

<p>이름</p>
<input name="nickname" />

같은 글을 label로 적고 for에 칸의 id를 적은 코드입니다.

<label for="nick">이름</label>
<input
  id="nick"
  name="nickname"
/>

두 결과 화면은 거의 같아 보입니다. 다른 것은 잰 값입니다. 읽는 이름은 화면 읽기 프로그램이 그 요소를 부르는 이름입니다 — 앞에서 링크는 링크 글자, 그림은 alt가 읽는 이름이었습니다. 칸은 짝지은 라벨의 글이 읽는 이름이 됩니다. p로 적은 글은 칸과 짝이 아니라서, 칸에는 이름이 없습니다(브라우저 규칙 3).

2짝을 짓는 두 꼴

for와 id를 같게 — 앞 절의 꼴입니다. 라벨과 칸이 떨어져 있어도 짝이 됩니다. 짝을 지으면 라벨 글자를 눌러도 칸이 골라집니다. 아래 잰 값은 '이름' 글자를 누른 뒤에 잰 것입니다.

<label for="nick">이름</label>
<input
  id="nick"
  name="nickname"
/>

지금 포커스는 지금 칠 준비가 된 요소, 곧 커서가 깜빡이는 칸입니다. 글자를 눌렀는데 칸에 포커스가 갔습니다. 결과 화면에서도 '이름' 글자를 눌러 보세요. 칸에 커서가 생깁니다. 작은 칸을 겨냥하지 않아도 되어 휴대전화에서 누르기도 쉽습니다.

칸을 label 안에 넣기 — for와 id 없이도 짝이 됩니다.

<label>
  이름
  <input name="nickname" />
</label>

두 꼴 모두 같은 일을 합니다. 라벨과 칸 사이에 다른 요소를 두거나 CSS로 따로 놓을 때는 for와 id 꼴이 편합니다.

예제

후기 폼의 이름 칸입니다. 라벨로 이름을 붙이고, 칸 안에는 무엇을 칠지 보기를 회색 글(placeholder)로 보였습니다.

<label for="nick">이름</label>
<input
  id="nick"
  name="nickname"
  placeholder="예: 하늘"
/>

읽는 이름은 라벨 글 '이름'입니다. placeholder는 비어 있는 칸 안에 보이는 보기 글일 뿐, 라벨이 있으면 이름으로 쓰이지 않습니다. 결과 화면 칸에 글을 치면 '예: 하늘'은 사라지고, 칸 앞의 '이름'은 그대로 남습니다.

자주 틀리는 곳

틀린 생각: 칸 안에 placeholder로 '찾을 요리'라고 적으면 라벨은 없어도 된다.

<input
  id="q"
  name="q"
  placeholder="찾을 요리"
/>

라벨이 없으면 크롬은 placeholder 글을 읽는 이름으로 씁니다. 여기까지는 라벨과 같아 보입니다. 결과 화면 칸에 '떡볶이'를 쳐 보세요. 치기 시작하면 '찾을 요리'가 화면에서 사라져, 무엇을 치던 칸인지 다시 볼 수 없습니다. 글자가 없으니 눌러서 칸을 고를 곳도 없습니다.

맞는 규칙: 칸의 이름은 label로 붙이고, placeholder는 보기 글로만 씁니다. 라벨은 치는 동안에도 화면에 남고, 눌러서 칸을 고를 수 있습니다.

틀린 생각: for에는 칸의 name을 적는다.

name도 칸의 이름이라 그것으로 짝을 짓는다고 여기기 쉽습니다.

<label for="nickname">
  이름
</label>
<input
  id="nick"
  name="nickname"
/>

'이름' 글자를 눌러도 칸이 골라지지 않고, 칸에는 읽는 이름이 없습니다. for="nickname"과 같은 id를 가진 요소가 없기 때문입니다.

맞는 규칙: for는 칸의 id를 가리킵니다. 짝은 id로 짓고, name은 보낼 때 쓰는 이름입니다(앞 레슨 name과 value).

틀린 생각: 라벨이 화면에 보이지 않게 hidden을 붙여도 이름은 남는다.

화면에는 이름이 없어도 되는 칸이라, 라벨을 숨기기만 하면 된다고 생각하게 됩니다.

<label for="nick" hidden>
  이름
</label>
<input
  id="nick"
  name="nickname"
/>

hidden을 붙인 라벨은 그리지 않을 뿐 아니라 읽는 쪽에서도 사라져, 칸의 이름이 없어졌습니다.

맞는 규칙: hidden으로 숨긴 라벨은 이름을 주지 못합니다. 화면에서만 숨기고 이름은 남기는 길은 7단원 글자 없는 단추와 숨긴 라벨에서 봅니다.

확인 문제

1. 예제에서 라벨의 for="nick"만 지웠습니다. 이름 칸의 읽는 이름은 무엇일까요?

<label>이름</label>
<input
  id="nick"
  name="nickname"
  placeholder="예: 하늘"
/>

• ① 이름
• ② 예: 하늘
• ③ 없음

2. 별점 칸의 라벨입니다. 글자 '별점'을 누르면 칸이 골라지게 ____ 자리에 들어갈 것을 쓰세요.

<label ____>별점</label>
<input
  id="star"
  name="rating"
/>

<label for="star">별점</label>
<input
  id="star"
  name="rating"
/>

3. 카페 메뉴판 페이지의 주문 폼입니다. '요청 사항' 글자를 눌러도 칸이 골라지지 않습니다. 몇 번 줄을 어떻게 고칠까요?

<label for="memo">
  요청 사항
</label>
<input
  id="request"
  name="request"
  placeholder="예: 덜 달게"
/>

<label for="request">
  요청 사항
</label>
<input
  id="request"
  name="request"
  placeholder="예: 덜 달게"
/>

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 예제를 html-css-study 폴더에 label.html로 저장해 열고, '이름' 글자를 눌러 칸에 커서가 생기는지 봅니다. 그다음 for="nick"을 for="nik"으로 한 글자 틀리게 고쳐 저장하고, 글자를 누르면 어떻게 될지 먼저 적은 뒤 눌러 맞춰 봅니다.