목차
Checkbox (체크박스)
Radio button (라디오 버튼)
Toggle Switch (토글 스위치)
Checkbox (체크박스)
1.
type="checkbox" 경우, 각각의 name이 상이 해야 함.
2. 각 요소 나열 방법
.form-check 클래스 - 세로로 나열
.form-check-inline 클래스 - 가로로 나열
[예제]
<form action="/action_page.php">
<div class="form-check ">
<input type="checkbox" class="form-check-input " id="html " name="html " value="html" checked >
<label class="form-check-label " for="html ">HTML</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="css" name="css " value="css">
<label class="form-check-label" for="css">CSS</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" disabled >
<label class="form-check-label">JS</label>
</div>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
Radio button (라디오 버튼)
1.
type="radio" 경우, 각각의 name이 동일 해야 함.
2. 각 요소 나열 방법
.form-check 클래스 - 세로로 나열
.form-check-inline 클래스 - 가로로 나열
[예제]
<form action="/action_page.php">
<div class="form-check ">
<input type="radio" class="form-check-input " id="html " name="lang " value="html" checked >
<label class="form-check-label " for="html ">HTML</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="css" name="lang " value="css">
<label class="form-check-label" for="css">CSS</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" disabled >
<label class="form-check-label">Option 3</label>
</div>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
Toggle Switch (토글 스위치)
.form-check 클래스 옆에 .form-switch 클래스 추가.
[예제]
<form action="/action_page.php">
<div class="form-check form-switch ">
<input class="form-check-input " type="checkbox" id="darkmode " name="darkmode" value="yes" checked >
<label class="form-check-label " for="darkmode ">Dark Mode</label>
</div>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
주소 복사
랜덤 이동