라디오 버튼
라디오 버튼은 여러 개의 항목 중에서 하나만 선택하도록 하는 동그란
버튼입니다.
라디오 버튼은 <input> 태그로 만듭니다.
기본형
<input type="radio" name="xxx" value="yyy" checked>
- name : name의 값이 같은 것 중에서 하나를 선택합니다.
- value : 선택했을 때 전달될 값입니다.
- checked : 선택된 상태로 만듭니다.
예제
예제 1
- Apple 또는 Banana 중 하나만 선택합니다.
- (중복 선택이 가능하게 하려면 체크박스를 만드세요.)
- 아무것도 선택되지 않은 상태에서 시작합니다.
<form method="get" action="form-action.html">
<p>Fruit</p>
<label><input type="radio" name="fruit" value="apple"> Apple</label>
<label><input type="radio" name="fruit" value="banana"> Banana</label>
<p><input type="submit" value="Submit"> <input type="reset" value="Reset"></p>
</form>
Tip: 라디오 버튼은 체크박스와는 달리 선택을 해제할 수 없습니다. 따라서 초기화 버튼을 만들어두는 것이 좋습니다.
<input type="reset" value="Reset"/>
예제 2
- Apple 또는 Banana에서 하나, Soccer 또는 Baseball에서 하나를 선택합니다.
- 아무것도 선택되지 않은 상태에서 시작합니다.
<form method="get" action="form-action.html">
<p>Fruit</p>
<label><input type="radio" name="fruit" value="apple"> Apple</label>
<label><input type="radio" name="fruit" value="banana"> Banana</label>
<p>Sports</p>
<label><input type="radio" name="sports" value="soccer"> Soccer</label>
<label><input type="radio" name="sports" value="baseball"> Baseball</label>
<p><input type="submit" value="Submit"> <input type="reset" value="Reset"></p>
</form>
예제 3
- checked를 추가하면, 그 값이 선택된 상태로 시작합니다.
<form method="get" action="form-action.html">
<p>Fruit</p>
<label><input type="radio" name="fruit" value="apple"> Apple</label>
<label><input type="radio" name="fruit" value="banana" checked> Banana</label>
<p><input type="submit" value="Submit"> <input type="reset" value="Reset"></p>
</form>