HTML checkbox 속성은 복수 선택이 가능한 체크 박스를 생성합니다. checkbox는 클릭을 한 번 더 하면 취소도 가능합니다. <label> 태그는 checkbox에 이름 삽입 및 영역을 설정합니다. 이럴 경우 글씨를 클릭해도 체크가 가능합니다.
HTML input checkbox 체크박스
<input type = "checkbox">; 속성값은 복수 선택이 가능한 체크박스입니다. radio의 경우 단일 선택의 경우에 쓰입니다.
반면 checkbox 속성은 한 번 더 클릭하면 취소 기능도 자동 탑재되어있습니다.
<form>
<input type="checkbox">
</form>체크박스 이름 삽입 : label
체크박스에 이름을 삽입하거나 그룹화 할 경우 <label> 태그를 사용합니다. <label> 태그의 장점은 글씨 영역을 클릭해도 checkbox 영역이 클릭 된다는 점입니다.
<label for> 를 사용해서 그룹으로 묶는 방법입니다. 이 경우 <label for> 태그와 <input checkbox>가 서로 떨어져 있어도 연결됩니다.
<input type="checkbox" id="apple">
<label for="apple">세일러문</label>
<br>
<input type="checkbox" id="banana">
<label for="banana">웨딩 피치</label>
<br>
<input type="checkbox" id="orange">
<label for="orange">빨강망토 차차</label>또는 <input type = "checkbox"> 태그를 <label> 태그로 감싸면 됩니다.
<label>
<input type="checkbox">세일러문
</label>
<br>
<label>
<input type="checkbox">웨딩 피치
</label>
<br>
<label>
<input type="checkbox">빨강망토 차차
</label>체크 박스 그룹 지정 : name
여러 체크 박스를 하나의 그룹으로 지정하고 싶은 속성에 name 속성을 같은 이름으로 지정하면 됩니다.
<form>
<input type="checkbox" name="fruits"><label>사과</label>
<input type="checkbox" name="fruits"><label>자두</label>
<input type="checkbox" name="fruits"><label>포도</label>
</form>체크박스 checked/unchecked
기본 설정은 unchecked 값입니다. 특정 체크박스에 체크 표시를 하고 싶은 경우 checked 속성명을 삽입하면 됩니다.
<form>
<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox">
</form>checked/uncheked 속성은 속성값 없이 속성명만 단독으로 작성할 수 있는 소수의 요소중의 하나입니다.