셀렉트박스(select)와 라디오 버튼(radio button)이 하나만 선택할 수 있는 반면 체크박스는 여러개를 선택할 수 있다는 특징을 가지고 있습니다.

<input type="checkbox" name="chk_info" value="HTML">HTML <input type="checkbox" name="chk_info" value="CSS">CSS <input type="checkbox" name="chk_info" value="웹디자인">웹디자인

기본적인 체크박스(Check Box)의 형태입니다.

HTML CSS 웹디자인

value 속성은 선택시 전송해 주는 값을 지정합니다.

위의 예제에서 CSS가 기본적으로 선택된채로 출력할려면 checked 속성을 사용하면 됩니다.

<input type="checkbox" name="chk_info" value="HTML">HTML <input type="checkbox" name="chk_info" value="CSS" checked="checked">CSS <input type="checkbox" name="chk_info" value="웹디자인">웹디자인

아래와 같이 CSS가 기본적으로 선택된 상태로 출력됩니다.

HTML CSS 웹디자인

체크박스(Check Box)는 복수의 값을 선택할 수 있기에 폼이 전송될때 이 값들이 어떻게 전송되는지를 잘 이해해야 합니다.

위의 예제에서 체크박스의 name 속성을 3개 모두 "chk_info"라고 지정하였습니다. 이때 HTML과 CSS를 동시에 선택하면 chk_info 필드의 값은 "HTML,CSS" 이런식으로 들어갑니다.

웹프로그램으로 전송된 폼 값을 처리해본 경험이 없는 경우 value 값이 중요한지 느끼기가 힘듭니다. 그러나 폼을 만들고 사용자에게 이 폼에 입력을 하라고 요구하는 것은 어떤 값을 전송 받아서 이를 처리하기 위함인것을 기억해야 합니다.

즉 왜 폼을 만드는지 이해를 한 상태에서 <form>태그와 폼 필드를 익혀야 한다는 말입니다.