TIL ( 2일차 2022-05-18 )

오늘은 radio button과 label, label for 활용 방법에 대해 알아보았다.

1. radio button

<div class="radiobutton-form">
        <input type="radio" id="gender"> Male</label>
       	<input type="radio" id="gender"> Female</label>
</div>

단순히 이렇게만 작성하면 radio button의 다른 속성을 눌러도 Toggle되지 않고 활성화된다.
radio button을 다시 눌러도 비활성화가 되지 않는다.

이는 radio button이 같은 그룹으로 묶여져 있지 않아서 생기는 현상이다.
CSS에 name 속성의 명칭을 통일하면 같이 그룹화되어 Toggle이 정상적으로 실행된다!

<div class="radiobutton-form">
        <input type="radio" id="gender" name="radio-select"> Male</label>
       	<input type="radio" id="gender" name="radio-select"> Female</label>
</div>

2. label

<label>태그는 폼 요소에 이름표를 붙이기 위해 사용한다.
쉽게 생각해서 <input>태그처럼 다양한 태그 앞에 있는 텍스트라고 생각해도 된다.

<label>Gender</label><input type="text">
<!-- 또는 -->
<label>Gender</label>
		<input type="radio" id="gender" name="radio-select"> Male</label>
       	<input type="radio" id="gender" name="radio-select"> Female</label>

3. label for

<label>을 눌렀을 때, 같이 묶여진 폼을 연결하여 활성화 해줄 수 있는 속성이다. <label for="name">으로 입력하고 여기서 name은 같이 묶여있는 폼의 name명이다.

<label for="text-gender">Gender</label><input type="text" id="text-gender">