html/css 라디오버튼, input type=radio

일반적으로 input의 type이

• checkbox인 경우는 다중선택이 가능함을 의미하고
• radio인 경우는 단일선택이 됨을 의미한다.

radio버튼의 경우 nameattribute 같은 이름을 주어 연관성을 주지 않는다면 checkbox와 마찬가지로 여러 선택이 된다. 접근성의 의미가 없어진다.

라디오버튼 단일선택. 연관성주기.

<!-- HTML -->
<input type='radio' name='fruit'/> 사과
<input type='radio' name='fruit'/> 바나나
<input type='radio' name='fruit'/> 감

이렇게 코드를 짜면 nameattribute끼리 연관성이 생겨서 세 개의 라디오버튼 중 하나의 라디오버튼만 체크가 가능하다.

하지만 위의 코드로 작성하게 되면 라디오버튼만 클릭해야 체크가 되고, 텍스트를 클릭했을때는 라디오버튼이 체크되지않는다.

라디오버튼 글자클릭 시 라디오버튼 체크. label태그 사용

label태그 사용법1

<!-- HTML -->
<input type='radio' id='americano' name='cafe'/>
<label for='americano'>아메리카노</label>
<input type='radio' id='latte' name='cafe'/>
<label for='latte'>라떼</label>
<input type='radio' id='coldbrew' name='cafe'/>
<label for='coldbrew'>콜드브루</label>

과일과의 연관성을 설명한 이미지에서는 달라진게 없이 보이는데, html코드를 보면 label태그의 forattribute를 input태그의 idattribute와 같은 이름으로 주어서 연결을 해주었다. 글자(텍스트)를 클릭해도 해당 라디오버튼에 체크가 된다.

label태그 사용법2

<!-- HTML -->
<label>
  <input type='radio' name='cafe'/>
</label>

코드는 <label>안에 <input>을 중첩시켜 사용할 수 있다. 이 경우 암묵적으로 연관이 되기 때문에 for 및 id속성이 필요없다.

React에서 사용시 알아두어야 할 사항

form태그 안에서 사용한다면 label의 forattribute가 아닌 htmlForattribute를 사용한다.