Bootstrap 4 입력

부트스트랩은 텍스트, 비밀번호, 날짜/시간, 날짜/시간-지역, 날짜, 월, 시간, 주, 숫자, 이메일, URL, 검색, 전화번호 및 색상 등 모든 HTML5 입력 유형을 지원한다.

⭐ 입력 유형이 올바르게 선언되지 않으면 입력 스타일이 완전히 지정되지 않는다.

지원되는 양식 컨트롤

부트스트랩은 다음 양식 컨트롤을 지원한다.

• 입력
• 텍스트 영역
• 체크박스
• 라디오
• 선택

부트스트랩 입력

부트스트랩은 텍스트, 비밀번호, 날짜/시간, 날짜/시간-지역, 날짜, 월, 시간, 주, 숫자, 이메일, URL, 검색, 전화번호 및 색상 등 모든 HTML5 입력 유형을 지원한다.

⭐ 입력 유형이 올바르게 선언되지 않으면 입력 스타일이 완전히 지정되지 않는다.

예제

<div class="form-group">
  <label for="usr">Name:</label>
  <input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
</div>

부트스트랩 텍스트 영역

예제

<div class="form-group">
  <label for="comment">Comment:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div>

부트스트랩 체크박스

사용자가 사전 설정된 옵션 목록에서 원하는 만큼의 옵션을 선택할 수 있도록 하려면 확인란을 사용한다.

예제

<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">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>

인라인 체크박스

확인란을 같은 줄에 표시하려면 .form-check-inline 클래스를 사용한다.

예제

<div class="form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 1
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 2
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="" disabled>Option 3
  </label>
</div>

부트스트랩 라디오 버튼

라디오 버튼은 사전 설정 옵션 목록에서 사용자가 하나만 선택할 수 있도록 제한하려는 경우에 사용된다.

체크박스와 마찬가지로 라디오 버튼을 같은 줄에 표시하려면 .form-check-inline 클래스를 사용한다.

예제 1

<div class="form-check">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 1
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 2
  </label>
</div>
<div class="form-check disabled">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio" disabled>Option 3
  </label>
</div>

예제 2

<div class="form-check-inline">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 1
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 2
  </label>
</div>
<div class="form-check-inline disabled">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio" disabled>Option 3
  </label>
</div>

부트스트랩 선택 목록

사용자가 여러 옵션 중에서 선택할 수 있도록 하려면 선택 목록이 사용된다.

예제

<div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

양식 제어 크기 조정

.form-control-sm 또는 .form-control-lg 를 사용하여 양식 컨트롤의 크기를 변경한다.

예제

<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">

일반 텍스트를 사용한 양식 제어

.form-control-plaintext를 사용하여 입력 필드의 스타일을 일반 텍스트로 지정한다.

예제

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

양식 제어 파일 및 범위

범위 컨트롤이나 파일 필드의 스타일을 전체 너비로 지정한다.

예제

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

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기