<label> 태그는 양식에 제목이나 설명을 덧붙이기 위한
것입니다. 라벨(label) 이란 입력창 옆에 'ID' 나 '비밀번호' 처럼 붙여 놓은
텍스트를 말합니다. <label> 태그를 사용하면 폼 요소와 라벨
텍스트가 서로 연결되어 있다는 것을 브라우저가 인식할 수 있습니다.
label
-
주요 속성은 for 입니다.
<label>태그의 for 의 값과 양식의 id 의 값이 같으면 연결됩니다. - label을 클릭하면 연결된 양식에 입력할 수 있도록 하거나 체크를 하거나 체크를 해제합니다.
<table>
<tr>
<label for="user-id">I D </label>
<input type="text" id="user-id">
</tr>
<tr>
<label for="user-name">이 름 </label>
<input type="text" id="user-name">
</tr>
<tr>
<label for="user-email">이메일 </label>
<input type="text" id="user-email">
</tr>
<tr>
<label><input type="checkbox"> 이메일 수신 동의</label>
</tr>
</table>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제
- input 요소의 for 값과 label 요소의 id 값을 연결한 간단한 예제입니다.
<p>
<label for="input-text">글상자</label>
<input type="text" id="input-text"/>
</p>
<p>
<label for="input-checkbox">체크박스</label>
<input type="checkbox" id="input-checkbox"/>
</p>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
Tip
id 와 for 가 없어도 input 요소를
<label> 태그로 감싸면 같은 결과를 얻을 수 있습니다.
<p><label>글상자 <input type="text"></label></p>
<p><label>체크박스 <input type="checkbox"></label></p>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
문의 양식에 무엇을 입력해야 하는지 안내하는 문구를 넣고 싶다면 placeholder를 사용합니다.
문의 양식에 안내 문구 넣는 방법 - placeholder