html 체크박스

html 체크박스는 값을 선택해야 할 때 사용할 수 있는 html 태그입니다. 회원가입 시 약관에 동의를 하는지를 질문할 때 필수로 체크해야 되는 값이 있고 선택으로 체크해야 되는 값이 있는 것처럼 원하는 값을 여러 개 선택해야 할 때 주로 사용이 됩니다. form 태그 안에서 사용이 되며 input 태그의 type 속성에 checkbox를 주면 생성이 되고 input 태그의 id 속성과 label 태그의 for 속성의 값을 일치시키면 글자를 클릭해도 값을 선택할 수 있습니다.

 

사용법

 

<form action="/fruit">
      <input type="checkbox" name="apple" value="apple" id="apple" />
      <label for="apple">apple</label>
      <input type="checkbox" name="banana" value="banana" id="banana" />
      <label for="banana">banana</label>
      <input type="checkbox" name="grape" value="grape" id="grape" />
      <label for="grape">grape</label>
      <button>submit</button>
 </form>

 

체크박스-전송결과

 

submit 버튼을 누르면 선택한 값을 서버에 전송하는데 apple을 선택했다면 name 속성값=value 속성값의 형식으로 전송이 됩니다.