체크박스 만드는 방법 - input - checkbox
체크박스
체크박스는 두 개 이상 여러 가지를 선택해야 할 경우 사용합니다.
클릭하면 선택되고, 다시 클릭하면 선택이 해제됩니다.
체크박스는 <input> 태그로 만듭니다.
기본형
<input type="checkbox" name="xxx" value="yyy" checked>- name : 전달할 값의 이름입니다.
- value : 전달될 값입니다.
- checked : 선택된 상태로 만듭니다.
예제
예제 1
<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>data-default-tab="result"
data-editable="true"
data-preview="true"
data-height="441"
data-pen-title="HTML 체크박스 만드는 방법 input checkbox 예제1"
data-slug-hash="NWNoZjY"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 360px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 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>data-default-tab="result"
data-editable="true"
data-preview="true"
data-height="441"
data-pen-title="HTML 체크박스 만드는 방법 input checkbox 예제2"
data-slug-hash="YzqBoQp"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 360px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.