HTML / input / checkbox / 체크박스 만들기
체크박스
체크박스는 클릭하면 선택되고, 다시 클릭하면 선택이 해제되는 사각형 모양의 박스입니다. 체크박스는 input 태그로 만듭니다.
문법
|
1 |
<input type="checkbox" name="xxx" value="yyy" checked> |
- name : 전달할 값의 이름입니다.
- value : 전달될 값입니다.
- checked : 선택된 상태로 만듭니다.
예제 1
- Blue 또는 Red를 선택합니다. 둘 다 선택할 수 있습니다.(라디오 버튼은 하나만 선택할 수 있습니다.)
- 아무것도 선택되지 않은 상태에서 시작합니다.
|
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>Color</p> <label><input type="checkbox" name="color" value="blue"> Blue</label> <label><input type="checkbox" name="color" value="red"> Red</label> <p><input type="submit" value="Submit"> <input type="reset" value="Reset"></p> </form> </body> </html> |
- Blue를 체크하고 Submit 버튼을 클릭하면 color의 값으로 blue를 전송합니다.
- 둘 다 체크하면 color의 값으로 blue와 red를 전송합니다.
예제 2
- 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>Color</p> <label><input type="checkbox" name="color" value="blue" checked> Blue</label> <label><input type="checkbox" name="color" value="red"> Red</label> <p><input type="submit" value="Submit"> <input type="reset" value="Reset"></p> </form> </body> </html> |
