in English

양식

다양한 양식을 만들기 위한 양식 컨트롤 스타일, 레이아웃 옵션 및 사용자 지정 구성 요소에 대한 예제 및 사용 지침입니다.

이 페이지에서

폼 컨트롤 여러 상태를 지원하여 텍스트 입력 및 텍스트 영역에 스타일을 지정합니다.

고르다 사용자 정의 초기 모양으로 브라우저 기본 선택 요소를 개선합니다.

수표 및 라디오 입력 옵션을 선택하려면 양식에서 사용자 정의 라디오 버튼과 확인란을 사용하십시오.

범위 브라우저 기본 범위 입력을 사용자 정의 버전으로 교체하십시오.

입력 그룹 의미론적 가치를 높이려면 레이블과 버튼을 입력에 부착하십시오.

플로팅 라벨 입력 필드 위에 떠 있는 아름답고 단순한 양식 레이블을 만드십시오.

형세 양식을 사용하여 인라인, 수평 또는 복잡한 그리드 기반 레이아웃을 만듭니다.

확인 사용자 지정 또는 기본 유효성 검사 동작 및 스타일을 사용하여 양식의 유효성을 검사합니다.

개요

Bootstrap의 양식 컨트롤 은 클래스가 있는 Rebooted 양식 스타일 을 확장합니다. 이 클래스를 사용하여 브라우저와 장치에서 보다 일관된 렌더링을 위해 사용자 정의된 디스플레이를 선택하십시오.

이메일 확인, 번호 선택 등과 같은 새로운 입력 컨트롤을 활용하려면 type모든 입력(예: email이메일 주소 또는 숫자 정보)에 적절한 속성을 사용해야 합니다 .number

다음은 Bootstrap의 양식 스타일을 보여주는 빠른 예입니다. 필수 클래스, 양식 레이아웃 등에 대한 문서를 계속 읽으십시오.

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

양식 텍스트

를 사용하여 블록 수준 또는 인라인 수준 양식 텍스트를 만들 수 있습니다 .form-text.

양식 텍스트를 양식 컨트롤과 연결

aria-describedby양식 텍스트는 속성 사용과 관련된 양식 컨트롤과 명시적으로 연결되어야 합니다 . 이렇게 하면 화면 판독기와 같은 보조 기술이 사용자가 컨트롤에 초점을 맞추거나 들어갈 때 이 양식 텍스트를 알릴 수 있습니다.

입력 아래의 양식 텍스트는 로 스타일을 지정할 수 있습니다 .form-text. 블록 수준 요소를 사용하는 경우 위의 입력과 쉽게 간격을 둘 수 있도록 위쪽 여백이 추가됩니다.

비밀번호

비밀번호는 8-20자 길이로 문자와 숫자를 포함해야 하며 공백, 특수 문자 또는 이모티콘을 포함할 수 없습니다.

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

인라인 텍스트는 클래스 외에는 아무 것도 없는 일반적인 인라인 HTML 요소( <span>, <small>, 또는 다른 것)를 사용할 수 있습니다..form-text

비밀번호

길이는 8-20자여야 합니다.

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

비활성화된 양식

입력에 부울 속성을 추가하여 disabled사용자 상호 작용을 방지하고 더 밝게 보이게 합니다.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

disabled속성을 추가하여 <fieldset>내부의 모든 컨트롤을 비활성화합니다. 브라우저는 내부의 모든 기본 양식 컨트롤( <input>, <select>, 및 <button>요소) <fieldset disabled>을 비활성화된 것으로 처리하여 키보드와 마우스 상호 작용을 모두 방지합니다.

그러나 양식에 와 같은 사용자 지정 버튼과 같은 요소가 포함되어 있는 <a class="btn btn-*">...</a>경우 이러한 요소에는 스타일만 제공 pointer-events: none됩니다. 이 경우 tabindex="-1"포커스를 받지 못하게 하고 aria-disabled="disabled"보조 기술에 상태를 알리도록 추가하여 이러한 컨트롤을 수동으로 수정해야 합니다.

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

접근성

모든 양식 컨트롤에는 해당 목적이 보조 기술 사용자에게 전달될 수 있도록 액세스 가능한 적절한 이름이 있어야 합니다. 이를 달성하는 가장 간단한 방법은 <label>요소를 사용하거나(버튼의 경우) 내용의 일부로 충분히 설명적인 텍스트를 포함하는 것 <button>...</button>입니다.

가시적이거나 적절한 텍스트 콘텐츠를 포함할 수 없는 상황에서 다음 <label>과 같이 여전히 액세스 가능한 이름을 제공하는 대체 방법이 있습니다.

<label>.visually-hidden클래스 를 사용하여 숨겨진 요소
다음을 사용하여 레이블 역할을 할 수 있는 기존 요소를 가리킵니다.aria-labelledby
title속성 제공
다음을 사용하여 요소에 액세스 가능한 이름을 명시적으로 설정aria-label

이들 중 어느 것도 존재하지 않는 경우 보조 기술은 placeholder속성을 액세스 가능한 이름 <input>및 <textarea>요소에 대한 대체로 사용하는 데 의존할 수 있습니다. 이 섹션의 예는 몇 가지 제안된 사례별 접근 방식을 제공합니다.

시각적으로 숨겨진 콘텐츠( .visually-hidden, aria-label, 및 placeholder양식 필드에 콘텐츠가 있으면 사라지는 콘텐츠)를 사용하면 보조 기술 사용자에게 도움이 되지만, 특정 사용자에게는 레이블 텍스트가 보이지 않는 것이 여전히 문제가 될 수 있습니다. 어떤 형태의 가시적 레이블은 일반적으로 접근성과 유용성 모두에서 가장 좋은 접근 방식입니다.

사스

많은 양식 변수는 개별 양식 구성 요소에서 재사용 및 확장할 수 있도록 일반적인 수준에서 설정됩니다. $btn-input-*가장 자주 및 $input-*변수 로 볼 수 있습니다.

변수

$btn-input-*변수는 버튼 과 양식 구성 요소 간에 공유되는 전역 변수입니다. 다른 구성 요소별 변수에 값으로 재할당되는 경우가 많습니다.

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      $border-width;