[HTML] 라디오 버튼 만들기 (input type="radio")

라디오 버튼은 여러 항목 중 원하는 항목 하나를 사용자가 선택할 수 있도록 하는 폼 요소입니다. 딱 하나만 선택할 수 있는 것이 특징으로 사용자가 라디오 버튼 중에서 하나를 선택하면, 다른 라디오 버튼은 선택이 해제됩니다. 라디오 버튼은 주로 폼(form) 태그에서 사용되며, 사용자가 선택한 옵션의 값을 폼 데이터로 제출할 수 있습니다. 예를 들어, 사용자가 성별을 선택하는 폼이 있다면, 라디오 버튼으로 "남성"과 "여성" 옵션을 제공할 수 있습니다. 이렇게 사용자가 성별을 선택하면 그 정보를 서버로 전송하여 후 처리를 할 수 있습니다.

 

 라디오 버튼 만들기 

• name : 라디오 버튼이 여러개 있을 경우 폼태그에서 라디오 버튼을 구분하기 위한 이름을 지정합니다. 라디오 버튼은 여러 개 중에서 하나만 선택하는 것이기 때문에 관련 있는 그룹끼리는 name 속성 값을 똑같이 만들어야 합니다.
• value : 선택한 라디오 버튼이 선택되었을 때 서버로 넘길 값을 선택합니다. 이 값은 필수 속성입니다.

See the Pen 라디오 버튼2 by wjdxo513 (@wjdxo513) on CodePen.

 

위 코드는 라디오 버튼 3개를 생성합니다. 각 라디오 버튼은 input 태그를 사용하여 만들며, type 속성에 radio 값을 지정합니다. name 속성은 같은 그룹에 속한 라디오 버튼들을 식별하기 위한 이름입니다. 같은 name 속성 값을 갖는 라디오 버튼들은 하나의 그룹으로 묶입니다. 만약 각 라디오 버튼을 특정하고 싶다면 id 속성을 사용하시면 됩니다.

 

각 라디오 버튼에 대한 라벨은 label 태그를 사용하여 만드시면 되고 만드는 방법은 제한이 없습니다. 참고로 label의 for 속성에 라디오 버튼의 id 값을 지정하시면 사용자가 라벨을 클릭했을 때 해당 라디오 버튼이 선택됩니다.

 

기본 선택 checked 속성

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

See the Pen 라디오 버튼1 by wjdxo513 (@wjdxo513) on CodePen.

 

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

 

Submit과 Reset 버튼

See the Pen 라디오 버튼3 by wjdxo513 (@wjdxo513) on CodePen.

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

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