[HTML] 양식(3) - label

2020. 8. 30. 19:11HTML, CSS/HTML

 

▶ <label>

  • 라벨 가능 요소(labelable)의 제목(Caption)을 지정.

  • 라벨 가능 요소: <button>, <input>, <progress>, <select>, <textarea>

  • for 속성으로 라벨 가능 요소를 참조하거나 콘텐츠로 포함.
    - for 속성: 참조할 라벨 가능 요소의 id 속성 값.

 

<label> 사용 예시

  - 라벨 가능 요소를 참조하거나 포함하는 경우 체크박스가 아닌 텍스트만 클릭해도 체크박스에 체크가 됨.

 

  • label { display: inline; }

 

<label> 사용 예시

  - label이 <input type="search">를 포함하는 경우.

  - 이때 검색이라는 텍스트만 클릭해도 입력창에 focus가 잡힘.

 

 

 

 

 

 

'HTML, CSS > HTML' 카테고리의 다른 글

[HTML] 양식(5) - textarea  (0) 2020.08.30
[HTML] 양식(4) - button  (0) 2020.08.30
[HTML] 양식(2) - input  (0) 2020.08.30
[HTML] 양식(1) - form  (0) 2020.08.27
[HTML] 표(2) - caption, colgroup, col, thead, tbody, tfoot  (0) 2020.08.27