[HTML] <input> 태그로 체크박스(checkbox) 만들기

지난 번에는 <form> 태그와 <input> 태그로 버튼을 만들고, 

버튼을 클릭하여 원하는 동작을 하도록 하는 방법을 알아보았습니다.

[HTML] <input> 태그로 버튼(button) 생성하기

이번에는 사용자의 선택을 입력 받을 수 있는, 

체크박스(checkbox)를 만드는 방법을 알아보도록 하겠습니다. 

<input> 태그로 체크박스(checkbox) 만들기

계속해서 <input> 태그의 ‘type’ 속성에 들어가는 값들에 대해서 알아보고 있습니다.

text 일반 텍스트를 입력받을 수 있습니다.

password 패스워드를 입력받을 수 있도록, 입력값이 화면에 보여지지 않도록 합니다.

submit <form> 태그 내에 입력된 데이터를 서버로 전달해 줍니다.

button 버튼을 생성해 줍니다.

checkbox 체크박스 형태의 입력을 받을 수 있습니다.

radio 라디오 버튼 형태의 입력을 받을 수 있습니다.

reset <form> 태그 안의 사용자 입력을 초기화 합니다.

체크박스를 만들기 위해서는 이 중 ‘checkbox’라는 키워드를 사용합니다.

1. 체크박스(checkbox) 생성하기

See the Pen html example by anna (@hianna) on CodePen.

성별과 좋아하는 과일을 선택할 수 있는 체크박스를 생성하였습니다.

① ‘type’ 

‘checkbox’로 지정해 주었습니다.

② ‘name’ 

체크박스의 이름입니다. 

같은 분류의 체크박스는 같은 이름으로 지정해 줍니다.

여기서는 성별을 선택하는 체크박스에는 모두 ‘gender’라는 이름을 지정하였고, 

좋아하는 과일을 선택하는 체크박스에는 사과든, 바나나든 모두 ‘fruits’라는 이름을 지정하였습니다.

③ ‘value’

선택 항목들이 가지는 고유한 값입니다. 

여기에 지정한 값들이 ‘제출(submit)’ 버튼을 누르면 서버로 전송됩니다.

(‘제출(submit)’ 버튼에 대해서는 지난 포스팅을 참조하세요. [HTML] 입력받은 데이터 서버로 전송하기 - submit)

④ 화면에 보여줄 선택박스 설명

<input> 태그 바깥에는 체크박스를 설명해줄 단어를 적습니다. 

여기서는 ‘여성’, ‘남성’, ‘사과’, ‘바나나’, ‘오렌지’ 라고 입력하였습니다. 

이 값은 사용자에게 체크박스를 선택할 수 있도록 설명을 제공할 뿐, 

이 값들이 서버로 전송되지는 않습니다. 서버로 전송되는 값은 ‘value’ 속성에 적힌 값입니다.

⑤ ‘checked’

사과항목에는 ‘checked’라는 속성이 하나 더 적혀 있습니다. 

이렇게 ‘checked’라는 속성을 적어주면, 

화면이 처음에 로딩될 때, 해당 항목은 기본으로 선택이 된 채로 보여집니다. 

2. 체크박스에서 선택한 값들이 서버로 어떻게 넘어가는지 보도록 하겠습니다.

앞에서 만든 소스를 복사하여 메모장에 붙여넣기 하고, html 파일로 저장하고, 브라우저에서 실행해보세요.

이때, 브라우저의 주소창에 나타난 URL을 보면, 

체크박스에 선택된 항목들이 ‘name=value’ 형식으로 넘어가고 있는 것을 볼 수 있습니다.

(<form> 태그의 ‘action’ 속성에 ‘a.jsp’라고 페이지를 지정하였지만, 

여기서는 해당페이지가 없기 때문에 ‘페이지를 찾을 수 없다’는 메시지를 얻게 됩니다.)

① ‘gender=male’ 

‘gender’는 소스에서 ‘name’으로 지정한 값이고, ‘male’은 소스에서 남성에 해당하는 ‘value’값으로 지정한 값이고, 이전 화면에서 저는 ‘남성’을 선택하였습니다.

② ‘fruits=banana&fruits=orange’ 

좋아하는 과일을 바나나와 오렌지 두가지를 선택하였습니다.

***

여기까지, <input> 태그를 활용하여 화면에 체크박스를 표시하고, 

선택된 체크박스의 항목이 서버로 어떻게 전달되는지 확인하였습니다.

그런데, 성별 같은 경우 체크박스로 표시하면 ‘남자’와 ‘여자’ 두 항목을 모두 선택할 수 있게 됩니다. 

이럴 경우에는 체크박스 대신 라디오 버튼을 사용해야 합니다.

다음 포스팅에서는 라디오 버튼을 만드는 방법을 알아보도록 하겠습니다.