라디오 버튼

HTML에서 라디오 버튼은 서로 배타적인 옵션 집합을 만들 때 사용되며, 사용자는 그룹에서 하나의 옵션만 선택할 수 있습니다. 라디오 버튼은 <input> 태그의 type 속성을 "radio"로 설정하여 만듭니다.

다음은 HTML에서 라디오 버튼을 만드는 기본 구문입니다:

<input type="radio" id="option1" name="radiogroup" value="option1">
<label for="option1">Option 1</label>

• <input>: 입력 필드를 정의하는 태그입니다.
• type="radio": 입력 유형을 라디오 버튼으로 지정하는 속성입니다.
• id: 라디오 버튼에 고유 식별자를 지정하는 속성입니다.

• name: 라디오 버튼을 함께 그룹화하는 속성입니다. 이름이 같은 모든 라디오 버튼은 같은 그룹에 속하며, 한 번에 그룹 내에서 하나의 옵션만 선택할 수 있습니다.

• value: 라디오 버튼과 연결된 값을 지정하는 속성입니다. 이 값은 양식이 제출될 때 서버로 전송됩니다.

• <label>: 라디오 버튼에 클릭 가능한 레이블을 제공하는 태그입니다. 레이블의 for 속성은 라디오 버튼의 id 속성과 일치해야 합니다.

라디오 버튼 그룹을 만드는 방법의 예시는 다음과 같습니다:

<form>
	<input type="radio" id="option1" name="mygroup" value="option1">
	<label for="option1">Option 1</label>
	<br>
	
	<input type="radio" id="option2" name="mygroup" value="option2">
	<label for="option2">Option 2</label>
	<br>
	
	<input type="radio" id="option3" name="mygroup" value="option3">
	<label for="option3">Option 3</label>
	<br>
</form>

이 예제에는 라디오 버튼이 세 개 있는 폼이 있으며, 모두 같은 name 속성("mygroup")을 공유하므로 같은 그룹에 속합니다. 각 라디오 버튼에는 고유한 id와 value, 그리고 이에 대응하는 레이블이 있습니다. 사용자가 이 옵션 중 하나를 선택하고 폼을 제출하면 선택한 라디오 버튼의 값이 서버로 전송됩니다.