HTML 폼(Form)을 활용하면 사용자로부터 다양한 입력값을 손쉽게 받을 수 있습니다. <form> 태그 안에 여러 폼 요소를 추가하는 방식으로 입력 양식을 구성하며, 대표적인 폼 요소로는 텍스트 입력창, 라디오 버튼, 제출(Submit) 버튼 등이 있습니다.
체크박스란?
체크박스(Checkbox)는 사용자가 여러 개의 항목을 동시에 선택할 수 있어야 할 때 사용하는 입력 요소입니다. 라디오 버튼과 달리 복수 선택이 가능하다는 점이 특징입니다. 체크박스 역시 HTML의 <input> 태그로 생성하며, 이때 type 속성 값을 checkbox로 지정합니다.
체크박스의 주요 속성
| 번호 | 속성 및 설명 |
| 1 | type 입력 컨트롤의 유형을 지정합니다. 체크박스를 만들려면 반드시 checkbox로 설정해야 합니다. |
| 2 | name 컨트롤에 이름을 부여합니다. 폼이 제출될 때 서버에서 해당 값을 식별하고 가져오는 데 사용됩니다. |
| 3 | value 체크박스가 선택되었을 때 서버로 전송될 값을 지정합니다. |
| 4 | checked 페이지 로드 시 해당 체크박스를 기본적으로 선택된 상태로 표시하고 싶다면 이 속성을 추가합니다. |
예제 코드
아래 코드를 실행하면 HTML에서 체크박스 버튼이 실제로 어떻게 동작하는지 확인할 수 있습니다. 각 프로그래밍 언어마다 고유한 name과 value를 부여하여, 사용자가 선택한 항목들이 서버로 전달되도록 구성했습니다.
<!DOCTYPE html> <html> <head> <title>HTML 체크박스 버튼</title> </head> <body> <p>사용 중인 프로그래밍 언어를 선택하세요:</p> <form> <input type="checkbox" name="language1" value="java">Java <br> <input type="checkbox" name="language2" value="php">PHP <br> <input type="checkbox" name="language3" value="cpp">C++ <br> </form> </body> </html>
실행 결과
위 코드를 브라우저에서 열면 'Java', 'PHP', 'C++' 세 개의 체크박스가 나타나며, 사용자는 원하는 항목을 자유롭게 복수 선택할 수 있습니다. 참고로 원본 예제에서는 <head> 태그가 <body> 내부에 위치했지만, 올바른 HTML 문서 구조에서는 <head>가 <body>보다 먼저 와야 하므로 위 예제에서는 순서를 바로잡았습니다.