양식 - LABEL

라벨 가능 요소(labelable)의 제목(Caption).

• for 속성으로 라벨 가능 요소를 참조(연결)하거나 콘텐츠로 포함.
• 라벨 가능 요소: <button>, <input>, <progress>, <select>, <textarea>

속성	의미
for	참조할 라벨 가능 요소의 id 속성 값

 

<input type="checkbox" id="user-agreement" />
<label for="user-agreement">동의하십니까?</label>

<!-- 라벨 가능 요소를 포함 -->
<label><input type="checkbox" />동의하십니까?</label>

for을 이용해서 해당 label은 checkbox와 연결되었다.

또한 label에서 input을 이용해서 checkbox와 연결할수 있는데 주로 2번째 방식을 많이 사용한다. 1번째 사용할때는 2번째와같이 한번에 쓸수 없고 나눠서 써야할때 이용한다고 한다. 

이와같이 한다면 텍스트를 클릭시 check박스에 체크표시가 된다.

 

 

 

<label>
        검색 <input type="search">
</label>

다음과 같이해도 "검색" 글씨를 클릭해도 text칸에 포커스가 된다.