[form] HTML - <input type="checkbox"> 태그 - 체크박스 모양 INPUT (= 인풋체크박스타입/체크박스타입인풋)

1. <input type="checkbox"> 예제 - 체크박스 모양 INPUT 요소
2. <input type="checkbox"> 정의
3. <input type="checkbox"> 구문
4. <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>

 

결과보기