라디오 버튼이란?
라디오 버튼은 HTML 폼 요소 중 하나로, 여러 개의 옵션 중에서 단 하나만 선택할 수 있는 버튼입니다. 사용자에게 선택지를 제공하고, 선택한 값을 서버로 전송할 때 주로 사용됩니다.
라디오 버튼 만들기
라디오 버튼은 input 태그의 type 속성을 "radio"로 설정하여 만들 수 있습니다. 아래는 기본적인 라디오 버튼의 코드입니다.
<input type="radio" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" name="gender" value="female">
<label for="female">Female</label>위 코드에서 name 속성은 같은 그룹 내에서 하나의 옵션만 선택될 수 있도록 그룹을 지정합니다. 각각의 라디오 버튼은 value 속성을 통해 다른 값을 가지며, 선택된 버튼의 값을 서버로 전송하게 됩니다.
라디오 버튼의 기능과 사용법
라디오 버튼은 다음과 같은 기능과 사용법을 가지고 있습니다.
- 하나의 옵션만 선택 가능 : 같은 그룹 내에서는 하나의 옵션만 선택할 수 있습니다.
- 라벨과의 연결 : label 태그와 함께 사용하여 사용자가 라디오 버튼을 보다 쉽게 선택할 수 있도록 합니다.
- 기본값 설정 : checked 속성을 사용하여 원하는 라디오 버튼을 기본 선택 상태로 설정할 수 있습니다.
- 서버로 값 전송 : 선택된 라디오 버튼의 값을 서버로 전송하여 처리할 수 있습니다.
라디오 버튼의 활용 예시
라디오 버튼은 다양한 목적으로 활용될 수 있습니다. 예를 들면, 회원 가입 폼에서 성별 선택, 설문 조사에서 단일 선택 등이 있을 수 있습니다.
다음은 HTML 폼에 라디오 버튼을 활용한 예시 코드입니다.
<form action="/submit" method="post">
<p>성별: </p>
<input type="radio" name="gender" value="male" id="male">
<label for="male">남성</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">여성</label>
<input type="submit" value="제출">
</form>위 예시 코드에서는 사용자로부터 성별을 선택받아 서버로 전송하는 폼을 만들었습니다.
마무리
라디오 버튼은 한 번에 하나의 옵션만 선택할 수 있는 편리한 HTML 폼 요소입니다. name 속성을 통해 그룹을 지정하고, value 속성을 통해 서버로 전송될 값을 설정할 수 있습니다. 또한, label과 함께 사용하여 사용자 친화성을 높일 수 있습니다. 라디오 버튼을 사용하여 다양한 폼 요소를 만들어보세요!
댓글