라디오 버튼

HTML에서 라디오 버튼은 사용자가 그룹 내에서 단 하나의 옵션만 선택할 수 있는 상호 배타적인 옵션 세트를 만드는 데 사용됩니다. 라디오 버튼은 type 속성이 "radio"로 설정된 <input> 태그를 사용하여 생성됩니다.

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를 가지며, 그에 해당하는 레이블이 있습니다. 사용자가 이 옵션 중 하나를 선택하고 폼을 제출하면, 선택된 라디오 버튼의 값이 서버로 전송됩니다.