전체 방문자
오늘
어제
  • 전체 글
    • HTML
    • CSS
    • Javascript
    • React
    • Typescript
    • Next.js
    • Webpack
    • Vue.js
    • Git & GitHub
    • Error
    • Study
    • 개발 일지✨

블로그 메뉴

  • 💡
  • ⚙️
hELLO · Designed By 정상우.
하루

Home

label
HTML

label

2021. 12. 18. 04:29
  • 라벨 가능 요소의 제목
  • for 속성으로 라벨 가능 요소를 참조하거나 콘텐츠로 포함
  • 라벨 가능요소: <button>, <input>, <progress>, <select>, <textarea>
속성 의미
for 참조한 라벨 가능 요소의 id 속성 값

 

<!-- 라벨 가능 요소를 참조 -->
<input type="checkbox" id="user-agreement" />
<label for="user-agreement">동의하십니까?</label>   /* id "user-agreement"를 가진 요소를 포함함 */

<!-- 라벨 가능 요소를 포함 -->
<label><input type="checkbox" />동의하십니까?</label>   /* 위와 동일한 효과. 요소와 텍스트를 label로 랩핑해줌 */

체크박스나 텍스트를 클릭해도 체크가능

 

    'HTML' 카테고리의 다른 글
    • 의미론적(Semantic) 태그
    • 인라인 텍스트
    • HEAD에 포함되는 태그
    • 블록요소 / 인라인 요소 특징

    티스토리툴바