[HTML] input / label 태그의 웹접근성

1. 암시적 작성방식

label 태그 안에 input 태그를 넣음
for 속성을 명시하지 않더라도 암묵적으로 연결하는 방식입니다.

 

<div class="box">

  <label  class="label">

    <input type="radio" name="radio" id="radio1" class="iunput">

  </label>

  <label class="label">

    <input type="radio" name="radio" id="radio2" class="iunput">

  </label>

</div>

2. 명시적 작성방식(대부분 선호)

label 의 for 속성과 input의 id 속성을 동일하게 작성함으로써 명시함

<div class="box">

  <input type="radio" name="radio" id="circle" class="iunput">

  <label for="circle" class="label"></label>

 

  <input type="radio" name="radio" id="circle" class="iunput">

  <label for="circle" class="label"></label>

</div>