Bootstrap 5 폼

스타일러드 폼

모든 .form-control 클래스를 설정한 <input>과 <textarea> 요소는 올바른 폼 스타일을 얻을 수 있습니다：

예제

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">이메일：</label>
    <input type="email" class="form-control" id="email" placeholder="이메일 주소를 입력하세요" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">암호：</label>
    <input type="password" class="form-control" id="pwd" placeholder="암호를 입력하세요" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> 기억하세요
    </label>
  </div>
  <button type="submit" class="btn btn-primary">제출</button>
</form>

직접 시험해보세요

또한 주목해 주세요, 각 label 요소에 대해 .form-label 를 통해 올바른 채우기를 보장합니다.

체크박스는 다른 표시를 가지고 있습니다. 이들은 다음과 같은 클래스로 설정되었습니다 .form-check 클래스의 컨테이너 요소로 설정합니다. label 설정 .form-check-label 클래스를 사용하여 체크박스와 단일 선택 버튼을 감싸는 .form-check-input。

텍스트 에リア

예제

<label for="comment">댓글：</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

직접 시험해보세요

폼 행 / 그리드(행 내 폼)

폼 요소가 가로로 표시되기를 원하시면 다음을 사용하세요 .row 및 .col：

예제

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="이메일 주소를 입력하세요" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="암호를 입력하세요" name="pswd">
    </div>
  </div>
</form>

직접 시험해보세요

여러분은 Bootstrap 그리드 챕터에서 열린 열과 행에 대한 더 많은 내용을 배울 수 있습니다.

폼 컨트롤 크기

당신은 .form-control-lg 또는 .form-control-sm 변경 .form-control 입력 컨트롤의 크기:

예제

<input type="text" class="form-control form-control-lg" placeholder="대형 입력 컨트롤">
<input type="text" class="form-control" placeholder="일반 입력 컨트롤">
<input type="text" class="form-control form-control-sm" placeholder="소형 입력 컨트롤">

직접 시험해보세요

비활성화 및 읽기 전용

disabled 및 readonly 속성을 사용하여 입력 필드를 비활성화하세요:

예제

<input type="text" class="form-control" placeholder="일반 입력 컨트롤">
<input type="text" class="form-control" placeholder="비활성화된 입력 컨트롤" disabled>
<input type="text" class="form-control" placeholder="읽기 전용 입력 컨트롤" readonly>

직접 시험해보세요

순수 텍스트 입력

다음을 사용하세요 .form-control-plaintext 박스 테두리를 설정하지 않은 입력 필드의 스타일을 설정하되 적절한 외부 마진과 내부 마진을 유지하세요:

예제

<input type="text" class="form-control-plaintext" placeholder="순수 텍스트 입력">
<input type="text" class="form-control" placeholder="일반 입력 컨트롤">

직접 시험해보세요

셀렉터

type="color"의 입력 스타일을 올바르게 설정하려면 다음을 사용하세요 .form-control-color 클래스:

예제

<input type="color" class="form-control form-control-color" value="#CCCCCC">

직접 시험해보세요