[HTML] <input> 태그로 라디오버튼(radio) 만들기

지난 번에는 <form> 태그와 <input> 태그로 체크박스를 만들고,

체크박스에 선택 된 정보가 어떻게 서버로 전달되는지 알아보았습니다.

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

지난번에 알아본 체크박스는 사용자가 여러 개의 선택을 할 수 있었습니다.

이번에는 사용자의 선택을 “하나만” 입력 받을 수 있는, 

라디오버튼(radio)을 만드는 방법을 알아보도록 하겠습니다. 

<input> 태그로 라디오버튼(radio) 만들기

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

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

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

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

button 버튼을 생성해 줍니다.

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

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

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

라디오버튼을 만들기 위해서는 이 중 ‘radio’라는 키워드를 사용합니다.

1. 라디오버튼(radio) 생성하기

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

체크박스 예제에서 사용했던 예제를 그대로 라디오 버튼 예제로 변경하였습니다.

성별과 가장 좋아하는 과일을 선택할 수 있는 라디오 버튼을 생성하였습니다.

① ‘type’ 

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

② ‘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’ 

좋아하는 과일로 바나나를 선택하였습니다.

***

여기까지, <input> 태그를 활용하여 화면에 라디오버튼을 표시하고, 

선택된 라디오버튼의 항목이 서버로 어떻게 전달되는지 확인하였습니다.