[basic] BS4 - Input (BS입력 = BS인풋)

목차

1. Form 제어1 - input
2. Form 제어2 - textarea
3. Form 제어3 - checkbox
4. Form 제어4 - radio
5. Form 제어5 - select
6. INPUT type="text" 크기 (= 높이)
7. INPUT type="text" 테두리
8. INPUT type="range" 범위선택
9. INPUT type="file" 파일첨부

 

Form 제어1 - input

 

<div class="form-group">

  <label for="usr">이름:</label>

  <input type="text" class="form-control" id="usr">

</div>

<div class="form-group">

  <label for="pwd">비밀번호:</label>

  <input type="password" class="form-control" id="pwd">

</div>

 

 

Form 제어2 - textarea

 

<div class="form-group">

  <label for="comment">자기소개:</label>

  <textarea class="form-control" rows="5" id="comment"></textarea>

</div>

 

 

Form 제어3 - checkbox

[세로 나열]

 

<div class="form-check">

  <label class="form-check-label">

    <input type="checkbox" class="form-check-input" value="" checked>Option 1

  </label>

</div>

<div class="form-check">

  <label class="form-check-label">

    <input type="checkbox" class="form-check-input" value="">Option 2

  </label>

</div>

<div class="form-check">

  <label class="form-check-label">

    <input type="checkbox" class="form-check-input" value="" disabled>Option 3

  </label>

</div>

 

---

[가로 나열]

 

<div class="form-check-inline">

  <label class="form-check-label" for="check1">

<input type="checkbox" class="form-check-input" id="check1" name="option1" value="something" checked>Option 1

  </label>

</div>

<div class="form-check-inline">

  <label class="form-check-label" for="check2">

<input type="checkbox" class="form-check-input" id="check2" name="option2" value="something">Option 2

  </label>

</div>

<div class="form-check-inline">

  <label class="form-check-label">

<input type="checkbox" class="form-check-input" disabled>Option 3

  </label>

</div>

 

 

Form 제어4 - radio

[세로 나열]

 

<div class="form-check">

  <label class="form-check-label">

    <input type="radio" class="form-check-input" value="" checked>Option 1

  </label>

</div>

<div class="form-check">

  <label class="form-check-label">

    <input type="radio" class="form-check-input" value="">Option 2

  </label>

</div>

<div class="form-check">

  <label class="form-check-label">

    <input type="radio" class="form-check-input" value="" disabled>Option 3

  </label>

</div>

 

---

[가로 나열]

 

<div class="form-check-inline">

  <label class="form-check-label" for="check1">

<input type="radio" class="form-check-input" id="check1" name="option1" value="something" checked>Option 1

  </label>

</div>

<div class="form-check-inline">

  <label class="form-check-label" for="check2">

<input type="radio" class="form-check-input" id="check2" name="option2" value="something">Option 2

  </label>

</div>

<div class="form-check-inline">

  <label class="form-check-label">

<input type="radio" class="form-check-input" disabled>Option 3

  </label>

</div>

 

 

Form 제어5 - select

[단일 선택]

 

<div class="form-group">

  <label for="hz1">단일선택</label>

  <select class="form-control" id="hz1" name="hz1">

      <option>1</option>

      <option>2</option>

      <option>3</option>

      <option>4</option>

  </select>

</div>

 

---

[멀티 선택] - Ctrl 키 또는 Shift 키 누른 채 여러 개 선택 가능.

<div class="form-group">

  <label for="hz2">멀티선택</label>

  <select multiple class="form-control" id="hz2" name="hz2">

      <option>1</option>

      <option>2</option>

      <option>3</option>

      <option>4</option>

      <option>5</option>

  </select>

</div>

 

 

INPUT type="text" 크기 (= 높이)

 

<input type="text" class="form-control form-control-sm">

<input type="text" class="form-control form-control">

<input type="text" class="form-control form-control-lg">

 

 

INPUT type="text" 테두리

[테두리 O]

 

<div class="form-group">

  <input type="text" class="form-control" placeholder="내용 입력하세요." name="hz1">

</div>

 

---

[테두리 X]

 

<div class="form-group">

  <input type="text" class="form-control-plaintext" placeholder="내용 입력하세요." name="hz2">

</div>

 

 

INPUT type="range" 범위선택

 

<div class="form-group">

  <input type="range" class="form-control-range" name="hzrange">

</div>

 

INPUT type="file" 파일첨부

 

<div class="form-group">

  <input type="file" class="form-control-file border" name="hzfile">

</div>