체크박스
체크박스는 두 개 이상 여러 가지를 선택해야 할 경우 사용합니다.
클릭하면 선택되고, 다시 클릭하면 선택이 해제됩니다.
체크박스는 <input> 태그로 만듭니다.
기본형
<input type="checkbox" name="xxx" value="yyy" checked>
- name : 전달할 값의 이름입니다.
- value : 전달될 값입니다.
- checked : 선택된 상태로 만듭니다.
예제
예제 1
- Blue 또는 Red를 선택합니다. 둘 다 선택할 수 있습니다.
- (라디오 버튼은 하나만 선택할 수 있습니다.)
- 아무것도 선택되지 않은 상태에서 시작합니다.
<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>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 2
- checked를 추가하면 선택된 상태에서 시작합니다.
<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>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
Tip : 체크박스 꾸미는 방법