[HTML] 체크박스 만들기 (input type="checkbox")

체크박스는 사용자가 하나 이상의 옵션을 선택할 수 있도록  할 수 있는 UI 요소입니다. 주로 폼(form) 태그에서 사용되며, 사용자가 선택한 옵션의 값을 폼 데이터로 제출할 수 있습니다. 체크박스는 대개 양식, 설정, 필터링 등의 기능을 구현할 때 사용됩니다. 

 

 체크박스 만들기 

• name : 체크박스가 여러개 있을 경우 폼태그에서 체크박스를 구분하기 위한 이름을 지정합니다. 
• value : 선택한 체크박스들이 선택되었을 때 서버로 넘길 값을 선택합니다. 이 값은 필수 속성입니다.

See the Pen Untitled by wjdxo513 (@wjdxo513) on CodePen.

 

위 코드는 체크박스 3개를 생성합니다. name 속성은 같은 그룹에 속한 체크박스를 식별하기 위한 이름입니다. 만약 각각의 체크박스를 특정하고 싶다면 id 속성을 사용하시면 됩니다. 위와 같이 label 태그로 체크박스를 감싸게 되면 사용자가 라벨을 클릭했을 때 해당 체크박스가 선택됩니다.

 

기본 선택 checked 속성

• checked : 체크박스의 항목들은 처음에 아무것도 선택되어 있지 않은 상태로 화면에 표시되는데 기본으로 선택해 놓을 항목을 지정하고 싶다면 이 checked 속성을 사용하면 됩니다.

See the Pen 체크박스2 by wjdxo513 (@wjdxo513) on CodePen.

 

위의 코드 처럼 미리 선택하고자 하는 라디오 버튼이 있다면 checked 속성을 추가해 주시면 됩니다.

 

Submit과 Reset 버튼

See the Pen 체크박스3 by wjdxo513 (@wjdxo513) on CodePen.

• submit : 폼에 있는 데이터를 서버로 전송합니다.
• reset : 폼에 있는 데이터를 초기화합니다.

앞서 설명한 대로 체크박스는 주로 사용자에게 입력을 받아 데이터를 서버로 전송하는 역할을 합니다. 이때 사용될 수 있는 태그가 submit과 reset입니다. submit은 폼의 데이터를 서버로 전송하고 reset은 폼에 입력한 모든 내용을 초기화시킵니다.