HTML 폼(Form)을 활용하면 사용자로부터 입력값을 손쉽게 받을 수 있습니다. <form> 태그 안에 다양한 폼 요소를 추가하여 사용자 입력을 수집하며, 대표적인 폼 요소로는 텍스트 입력창, 라디오 버튼, 제출(Submit) 버튼 등이 있습니다.
이번 글에서는 HTML 폼에서 라디오 버튼을 사용해 사용자 입력을 받는 방법을 자세히 알아보겠습니다. 라디오 버튼은 여러 선택지 중 단 하나의 옵션만 선택해야 할 때 사용합니다. 체크박스와 마찬가지로 <input> 태그로 생성하며, 이때 type 속성 값을 radio로 지정합니다.
라디오 버튼의 주요 속성
| 번호 | 속성 및 설명 |
| 1 | type 입력 컨트롤의 유형을 나타냅니다. 라디오 버튼으로 사용하려면 값이 radio로 설정되어야 합니다. |
| 2 | name 컨트롤에 이름을 부여합니다. 서버가 해당 컨트롤을 식별하고 값을 인식할 때 사용됩니다. |
| 3 | value 라디오 버튼이 선택되었을 때 서버로 전송되는 값입니다. |
| 4 | checked 기본적으로 해당 항목이 선택된 상태로 표시되길 원할 경우 checked로 설정합니다. |
예제 코드
아래 코드를 직접 실행해 보면서 HTML에서 라디오 버튼이 동작하는 방식을 확인해 보세요.
<!DOCTYPE html> <html> <body> <head> <title>HTML Radio Button</title> </head> <p>성별</p> <form> <input type="radio" name="gender" value="male">남성 <br> <input type="radio" name="gender" value="female">여성 </form> </body> </html>
정리
라디오 버튼은 같은 name 속성 값을 공유하는 항목들 중 하나만 선택 가능하다는 점이 핵심입니다. 위 예제처럼 성별 선택과 같이 상호 배타적인 옵션을 제공할 때 매우 유용하게 활용할 수 있습니다.