HTML / input / radio / 라디오 버튼 만들기
라디오 버튼
여러 개의 항목 중에서 하나만 선택하도록 하는 동그란 버튼을 라디오 버튼이라고 합니다. 라디오 버튼은 input 태그로 만듭니다.
문법
|
1 |
<input type="radio" name="xxx" value="yyy" checked> |
- name : name의 값이 같은 것 중에서 하나를 선택합니다.
- value : 선택했을 때 전달될 값입니다.
- checked : 선택된 상태로 만듭니다.
예제 1
- Apple 또는 Banana 중 하나만 선택합니다.(중복 선택이 가능하게 하려면 체크박스를 만드세요.)
- 아무것도 선택되지 않은 상태에서 시작합니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * { font-size: 16px; font-family: Consolas, sans-serif; } </style> </head> <body> <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> </body> </html> |
- Apple을 선택하고 Submit 버튼을 클릭하면, fruit의 값이 apple로 전송됩니다.
예제 2
- Apple 또는 Banana에서 하나, Soccer 또는 Baseball에서 하나를 선택합니다.
- 아무것도 선택되지 않은 상태에서 시작합니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * { font-size: 16px; font-family: Consolas, sans-serif; } </style> </head> <body> <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>Sport</p> <label><input type="radio" name="sport" value="soccer"> Soccer</label> <label><input type="radio" name="sport" value="baseball"> Baseball</label> <p><input type="submit" value="Submit"> <input type="reset" value="Reset"></p> </form> </body> </html> |
- Apple과 Baseball을 선택하고 Submit 버튼을 클릭하면 fruit의 값으로 apple, sport의 값으로 banana를 전송합니다.
예제 3
- checked를 추가하면, 그 값이 선택된 상태로 시작합니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * { font-size: 16px; font-family: Consolas, sans-serif; } </style> </head> <body> <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> </body> </html> |
Tip
라디오 버튼은 체크박스와는 달리 선택을 해제할 수 없습니다. 따라서 초기화 버튼을 만들어두는 것이 좋습니다.
|
1 |
<input type="reset" value="Reset"> |