[form] BS5 - Checkbox (체크박스) / Radio button (라디오버튼) / Toggle Switch (토글 스위치)

1. Checkbox (체크박스)
2. Radio button (라디오 버튼)
3. 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>