목차
- <input type="checkbox"> 예제 - 체크박스 모양 INPUT 요소
- <input type="checkbox"> 정의
- <input type="checkbox"> 구문
- <input type="checkbox"> 예제 - 체크박스 안 배경색 변경
<input type="checkbox"> 예제 - 체크박스 모양 INPUT 요소
<form action="/action_page.php">
<input type="checkbox" id="html" name="html" value="html">
<label for="html"> HTML</label><br>
<input type="checkbox" id="css" name="css" value="css">
<label for="css"> CSS</label><br>
<input type="checkbox" id="js" name="js" value="js">
<label for="js"> JS</label><br><br>
<input type="submit" value="확인">
</form>
결과보기
PS.
- id, name, value 속성의 값은 달라도 됨. (통일시키면 관리 편함.)
- id 속성 - ① CSS/JS 등으로 요소 제어. ② <label>태그와 연결
- name 속성 - 서버로 데이터 전달 시, 전달된 데이터의 이름 역할.
- value 속성 - 선택한 데이터가 들어감.
<input type="checkbox"> 정의
체크박스 모양 <input> 요소.
1.
- 보통, 사각형 모양으로 표시됨.
- 사용자가 1개 이상 택일 가능.
- <label> 태그 이용해 체크박스 범위 늘려서, 접근성 향상 가능.
- 체크박스 안 배경색 변경 안 되므로, <label> 요소 이용해 변경.
2. cf.
<input type="radio"> 태그 - 오직 1개만 택일 가능.
3.
주요 브라우저 모두 지원.
4. MDN <input type="checkbox"> 예제보기
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
<input type="checkbox"> 구문
<input type="checkbox">
<input type="checkbox"> 예제 - 체크박스 안 배경색 변경
<input type="checkbox"> 경우, background 속성 적용 X.
따라서, 연결된 <label> 요소를 이용해 배경색 변경 필요.
[예제1] - <input type="checkbox"> 요소는 배경색 적용 X
<style>
body {background:black;}
input {background:red;}
</style>
<input type="checkbox">
결과보기
[예제2] - <label> 요소 이용해 배경색 적용
<style>
body {background: black;}
.box {
display: inline-block;
position: relative;
margin-right: 10px;
}
.box input[type="checkbox"] {
display: none;
}
.my {
width: 20px;
height: 20px;
background: gray;
position: absolute;
top: 0;
left: 0;
}
.box input[type="checkbox"]:checked + .my {
background: green; /* 체크 시 배경색 */
}
</style>
<div class="box">
<input type="checkbox" id="hz">
<label for="hz" class="my"></label>
</div>
결과보기
