여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. Bootstrap – Bootstrap 4 입력
Bootstrap – Bootstrap 4 입력
5개월전 작성
6개월전 수정



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>
기본 예시
https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_form_radio_inline&stacked=h

부트스트랩 선택 목록

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

예제
<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
밍구
공부 목적 블로그