HTML에서 체크박스(checkbox)는 사용자가 여러 항목 중 하나 이상을 선택할 수 있도록 하는 폼 컨트롤입니다. 설문조사, 설정 옵션, 약관 동의 등 다양한 상황에서 활용되며, 라디오 버튼과 달리 여러 개를 동시에 선택할 수 있다는 점이 특징입니다.
체크박스의 기본 문법
HTML5에서 체크박스를 만드는 올바른 방법은 <input> 태그의 type 속성에 checkbox 값을 지정하는 것입니다. 기본 구문은 다음과 같습니다.
<input name = "your_name" value = "your_value" type = "checkbox">
각 속성의 역할은 다음과 같습니다.
- name: 서버로 전송될 때 해당 체크박스를 식별하는 이름입니다.
- value: 체크박스가 선택된 상태로 제출될 경우 서버로 전달되는 값입니다.
- type: 컨트롤의 종류를 지정하며, 체크박스의 경우 반드시
checkbox로 설정해야 합니다.
체크박스 예제
아래는 두 개의 체크박스를 사용해 과목을 선택할 수 있게 만든 간단한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>
</html>
실행 결과
위 코드를 실행하면 'Maths'와 'Physics'라는 두 개의 체크박스가 화면에 표시되며, 사용자는 원하는 과목을 자유롭게 하나 또는 여러 개 선택할 수 있습니다.
체크박스 활용 시 유용한 팁
- 기본 선택 상태 지정:
checked속성을 추가하면 페이지가 로드될 때 해당 체크박스가 미리 선택된 상태로 표시됩니다. - 라벨 연결:
<label>태그와 함께 사용하면 텍스트 영역을 클릭해도 체크박스가 선택되어 접근성과 사용성이 크게 향상됩니다. - 명확한 value 값 사용: 실제 프로젝트에서는
value = "on"대신 의미 있는 값(예:value = "maths")을 지정하면 서버 측 처리가 더 편리합니다.
이처럼 체크박스는 간단한 문법만으로 강력한 다중 선택 기능을 제공하므로, HTML 폼을 설계할 때 꼭 알아두어야 할 필수 요소입니다.