체크박스(checkbox)는 사용자가 여러 개의 항목을 동시에 선택해야 할 때 사용하는 폼 요소입니다. 라디오 버튼과 달리 두 개 이상의 옵션을 중복 선택할 수 있어, 설문조사나 관심 분야 선택 등 다양한 웹 폼에서 널리 활용됩니다.
1. 체크박스가 포함된 HTML 폼 만들기
다음은 세 개의 체크박스를 가진 간단한 HTML 폼 예제입니다. 파일 이름은 CheckBox.htm으로 저장하면 됩니다.
<html> <body> <form action = "main.jsp" method = "POST" target = "_blank"> <input type = "checkbox" name = "maths" checked = "checked" /> Maths <input type = "checkbox" name = "physics" /> Physics <input type = "checkbox" name = "chemistry" checked = "checked" /> Chemistry <input type = "submit" value = "Select Subject" /> </form> </body> </html>
이 코드를 실행하면 Maths(수학), Physics(물리), Chemistry(화학) 세 과목이 화면에 표시되며, checked 속성이 지정된 maths와 chemistry 항목은 기본적으로 선택된 상태로 나타납니다. 폼은 POST 방식으로 main.jsp에 데이터를 전송하도록 설정되어 있습니다.
2. JSP로 체크박스 데이터 처리하기
웹 브라우저에서 전송된 체크박스 입력값을 받아 처리하는 main.jsp 프로그램입니다. request.getParameter() 메서드를 사용하면 각 체크박스의 값을 손쉽게 읽어올 수 있습니다.
<html>
<head>
<title>Reading Checkbox Data</title>
</head>
<body>
<h1>Reading Checkbox Data</h1>
<ul>
<li><p><b>Maths Flag:</b>
<%= request.getParameter("maths")%>
</p></li>
<li><p><b>Physics Flag:</b>
<%= request.getParameter("physics")%>
</p></li>
<li><p><b>Chemistry Flag:</b>
<%= request.getParameter("chemistry")%>
</p></li>
</ul>
</body>
</html>
각 체크박스의 name 속성값(maths, physics, chemistry)을 getParameter()에 그대로 전달하면 해당 항목의 값을 가져올 수 있습니다.
3. 실행 결과 확인
위 프로그램을 실행하면 다음과 같은 결과가 출력됩니다.
Maths Flag : on
Physics Flag : null
Chemistry Flag : on
결과 해석
체크박스가 선택되어 있으면 해당 파라미터 값으로 문자열 "on"이 전달되고, 선택되지 않은 항목은 아무런 값도 전송되지 않아 getParameter()가 null을 반환합니다. 위 예제에서도 기본 선택된 maths와 chemistry는 "on", 선택되지 않은 physics는 null로 출력된 것을 확인할 수 있습니다.
따라서 실제 개발 시에는 반환값이 null인지 반드시 검사한 후 로직을 처리해야 하며, 필요하다면 <input type="checkbox" value="Y">처럼 value 속성을 직접 지정하여 원하는 값을 전달받도록 구성할 수도 있습니다.