in English

양식

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

개요

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

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

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

귀하의 이메일을 다른 사람과 공유하지 않습니다. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group 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>

양식 컨트롤

<input>s, <select>s 및 s 와 같은 텍스트 양식 컨트롤 은 클래스 <textarea>에 따라 스타일이 지정됩니다 . .form-control일반적인 모양, 초점 상태, 크기 조정 등에 대한 스타일이 포함됩니다.

추가 스타일을 위해 사용자 정의 양식 을 탐색하십시오 <select>.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

파일 입력의 경우 로 .form-control바꿉니다 .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

사이징

.form-control-lg및 와 같은 클래스를 사용하여 높이를 설정 .form-control-sm합니다.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

읽기 전용

readonly입력 값의 수정을 방지하기 위해 입력에 부울 속성을 추가합니다 . 읽기 전용 입력은 비활성화된 입력처럼 더 밝게 나타나지만 표준 커서는 유지됩니다.

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

읽기 전용 일반 텍스트

양식의 요소 를 <input readonly>일반 텍스트로 스타일 지정하려면 .form-control-plaintext클래스를 사용하여 기본 양식 필드 스타일을 제거하고 올바른 여백과 패딩을 유지하십시오.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

범위 입력

를 사용하여 수평으로 스크롤 가능한 범위 입력을 설정 .form-control-range합니다.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

체크박스와 라디오

기본 체크박스와 라디오는 HTML 요소의 레이아웃과 동작을 개선하는 두 입력 유형에 대한 단일 클래스.form-check 의 도움으로 개선되었습니다 . 확인란은 목록에서 하나 또는 여러 옵션을 선택하기 위한 것이고 라디오는 여러 옵션 중에서 하나를 선택하기 위한 것입니다.

비활성화된 확인란과 라디오가 지원됩니다. disabled속성은 입력 상태를 나타내는 데 도움이 되도록 더 밝은 색상을 적용합니다 .

확인란 및 라디오 버튼은 HTML 기반 양식 유효성 검사를 지원하고 간결하고 액세스 가능한 레이블을 제공합니다. 따라서 우리 <input>의 s와 s는 내 <label>와 반대되는 형제 요소 입니다. 및 를 연결하기 위해 및 속성을 지정해야 하므로 이것은 약간 더 장황합니다 .<input><label>idfor<input><label>

기본값(스택)

기본적으로 직계 형제인 체크박스와 라디오는 수직으로 쌓이고 적절한 간격으로 .form-check.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

인라인

에 추가하여 동일한 가로 행에 확인란 또는 라디오를 그룹화 .form-check-inline합니다 .form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

라벨 없음

레이블 텍스트가 없는 .position-static입력에 추가하십시오 . .form-check보조 기술에 대한 액세스 가능한 이름 형식을 계속 제공해야 합니다(예: 사용 aria-label).

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

형세

부트스트랩 은 거의 모든 양식 컨트롤에 적용되기 때문에 양식은 기본적으로 세로로 쌓 display: block입니다 . width: 100%추가 클래스를 사용하여 양식별로 이 레이아웃을 변경할 수 있습니다.

양식 그룹

클래스 는 .form-group양식에 일부 구조를 추가하는 가장 쉬운 방법입니다. 레이블, 컨트롤, 선택적 도움말 텍스트 및 양식 유효성 검사 메시지의 적절한 그룹화를 권장하는 유연한 클래스를 제공합니다. 기본적으로 만 적용 margin-bottom되지만 필요에 따라 추가 스타일을 선택 .form-inline합니다. <fieldset>s, <div>s 또는 거의 모든 다른 요소 와 함께 사용하십시오 .

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
  </div>
</form>

양식 그리드

그리드 클래스를 사용하여 더 복잡한 양식을 작성할 수 있습니다. 여러 열, 다양한 너비 및 추가 정렬 옵션이 필요한 양식 레이아웃에 사용합니다.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

양식 행

더 조밀하고 컴팩트한 레이아웃을 위해 기본 열 거터를 재정의하는 표준 그리드 행의 변형을 로 .row바꿀 수도 있습니다..form-row

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

그리드 시스템으로 더 복잡한 레이아웃을 생성할 수도 있습니다.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

가로 형태

.row양식 그룹에 클래스를 추가하고 클래스를 사용 .col-*-*하여 레이블 및 컨트롤의 너비를 지정 하여 그리드가 있는 수평 양식을 만듭니다 . 연결된 양식 컨트롤과 함께 세로로 가운데에 오도록 s에도 추가 .col-form-label해야 합니다.<label>

때때로, 필요한 완벽한 정렬을 생성하기 위해 여백 또는 패딩 유틸리티를 사용해야 할 수도 있습니다. 예를 들어, padding-top텍스트 기준선을 더 잘 정렬하기 위해 누적 라디오 입력 레이블에서 제거했습니다.

라디오 
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="form-group row">
    <legend class="col-form-label col-sm-2 float-sm-left pt-0">Radios</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          First radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Second radio
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Third disabled radio
        </label>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
가로 양식 레이블 크기 조정

및 의 크기 를 올바르게 따르려면 .col-form-label-sm또는 .col-form-label-lg를 사용하십시오 .<label><legend>.form-control-lg.form-control-sm

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

열 크기 조정

이전 예에서 볼 수 있듯이 그리드 시스템을 사용하면 또는 .col내에 s를 원하는 수만큼 배치할 수 있습니다. 사용 가능한 너비를 균등하게 분할합니다. 열의 하위 집합을 선택하여 공간을 더 많거나 적게 차지할 수도 있고 나머지는 와 같은 특정 열 클래스로 나머지를 균등하게 분할할 수도 있습니다..row.form-row.col.col-7

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

자동 크기 조정

아래 예에서는 flexbox 유틸리티를 사용하여 내용을 세로로 가운데에 맞추고 열이 필요한 만큼만 공간을 차지하도록 변경 .col합니다 . .col-auto즉, 열은 내용에 따라 자체적으로 크기를 조정합니다.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

그런 다음 크기별 열 클래스로 다시 한 번 리믹스할 수 있습니다.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

물론 사용자 정의 양식 컨트롤 이 지원됩니다.

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

인라인 양식

클래스를 사용하여 .form-inline단일 가로 행에 일련의 레이블, 양식 컨트롤 및 단추를 표시합니다. 인라인 양식 내의 양식 컨트롤은 기본 상태와 약간 다릅니다.

  • 컨트롤은 display: flexHTML 공백을 축소하고 간격 및 flexbox 유틸리티를 사용하여 정렬 컨트롤을 제공할 수 있도록 합니다.
  • 컨트롤 및 입력 그룹 width: auto은 부트스트랩 기본값을 재정의하기 위해 수신합니다 width: 100%.
  • 컨트롤 은 모바일 장치의 좁은 표시 영역을 설명하기 위해 너비가 최소 576px인 표시 영역에만 인라인으로 나타납니다 .

간격 유틸리티 를 사용하여 개별 양식 컨트롤의 너비와 정렬을 수동으로 처리해야 할 수도 있습니다 (아래 참조). 마지막으로, <label>스크린리더가 아닌 방문자에게 .sr-only.

@ 
<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

사용자 정의 양식 제어 및 선택도 지원됩니다.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
숨겨진 레이블에 대한 대안

화면 판독기와 같은 보조 기술은 모든 입력에 레이블을 포함하지 않으면 양식에 문제를 일으킬 것입니다. .sr-only이러한 인라인 양식의 경우 클래스 를 사용하여 레이블을 숨길 수 있습니다 . aria-label, aria-labelledby또는 title속성 과 같은 보조 기술에 대한 레이블을 제공하는 또 다른 대체 방법이 있습니다 . 이들 중 어느 것도 존재하지 않는 경우 보조 기술은 placeholder속성(있는 경우)을 사용하는 데 의존할 수 있지만 placeholder다른 라벨링 방법에 대한 대체 수단으로 를 사용하는 것은 권장되지 않습니다.

도움말 텍스트

양식의 블록 수준 도움말 텍스트는 (이전 에는 v3 .form-text으로 알려짐)를 사용하여 만들 수 있습니다. .help-block인라인 도움말 텍스트는 인라인 HTML 요소 및 와 같은 유틸리티 클래스를 사용하여 유연하게 구현할 수 있습니다 .text-muted.

도움말 텍스트를 양식 컨트롤과 연결

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

입력 아래의 도움말 텍스트는 로 스타일을 지정할 수 있습니다 .form-text. 이 클래스는 display: block위의 입력과 쉽게 간격을 둘 수 있도록 상단 여백을 포함하고 추가합니다.

비밀번호는 8-20자 길이로 문자와 숫자를 포함해야 하며 공백, 특수 문자 또는 이모티콘을 포함할 수 없습니다. 
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

인라인 텍스트는 유틸리티 클래스 외에는 아무 것도 없이 일반적인 인라인 HTML 요소( <small>, , 또는 기타)를 사용할 수 있습니다.<span>

길이는 8-20자여야 합니다. 
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

비활성화된 양식

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

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

disabled속성을 추가하여 <fieldset>내부의 모든 컨트롤을 비활성화합니다.

비활성화된 필드 세트 예 
<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-group">
      <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>
앵커로 주의

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

그러나 양식에 와 같은 사용자 정의 버튼과 같은 요소도 포함되어 있는 경우 <a ... class="btn btn-*">이러한 요소에는 의 스타일만 제공됩니다 pointer-events: none. 버튼의 비활성화 상태에 대한 섹션(특히 앵커 요소의 하위 섹션)에서 언급했듯이 이 CSS 속성은 아직 표준화되지 않았으며 Internet Explorer 10에서 완전히 지원되지 않습니다. 앵커 기반 컨트롤도 여전히 키보드를 사용하여 초점을 맞추고 조작할 수 있습니다. tabindex="-1"포커스를 받지 못하도록 하고 aria-disabled="disabled"보조 기술에 상태를 알리도록 추가하여 이러한 컨트롤을 수동으로 수정해야 합니다 .

브라우저 간 호환성

Bootstrap은 모든 브라우저에서 이러한 스타일을 적용하지만 Internet Explorer 11 이하 disabled에서는 <fieldset>. 사용자 정의 JavaScript를 사용하여 이러한 브라우저에서 필드 세트를 비활성화하십시오.

확인

지원되는 모든 브라우저에서 사용할 수 있는 HTML5 양식 유효성 검사를 통해 사용자에게 가치 있고 실행 가능한 피드백을 제공하세요 . 브라우저 기본 검증 피드백에서 선택하거나 내장 클래스 및 시작 JavaScript를 사용하여 사용자 정의 메시지를 구현하십시오.

현재 클라이언트 측 사용자 지정 유효성 검사 스타일 및 도구 설명은 보조 기술에 노출되지 않기 때문에 액세스할 수 없다는 것을 알고 있습니다. 솔루션을 개발하는 동안 서버 측 옵션이나 기본 브라우저 유효성 검사 방법을 사용하는 것이 좋습니다.

작동 방식

부트스트랩에서 양식 유효성 검사가 작동하는 방식은 다음과 같습니다.

  • HTML 양식 유효성 검사는 CSS의 두 의사 클래스 :invalid및 :valid. <input>, <select>및 <textarea>요소 에 적용됩니다 .
  • 부트스트랩 범위 :invalid와 :valid스타일은 .was-validated일반적으로 <form>. 그렇지 않으면 값이 없는 모든 필수 필드는 페이지 로드 시 유효하지 않은 것으로 표시됩니다. 이렇게 하면 활성화 시기를 선택할 수 있습니다(일반적으로 양식 제출이 시도된 후).
  • 양식의 모양을 재설정하려면(예: AJAX를 사용한 동적 양식 제출의 경우) 제출 후 다시 .was-validated클래스를 제거하십시오.<form>
  • 대체로, .is-invalid서버 측 유효성 검사.is-valid 를 위해 의사 클래스 대신 클래스를 사용할 수 있습니다 . 부모 클래스 가 필요하지 않습니다 ..was-validated
  • <label>CSS 작동 방식의 제약으로 인해 사용자 정의 JavaScript의 도움 없이 DOM의 양식 컨트롤 앞에 오는 스타일을 (현재) 적용할 수 없습니다 .
  • 모든 최신 브라우저는 양식 컨트롤의 유효성을 검사하기 위한 일련의 JavaScript 메서드인 제약 조건 유효성 검사 API 를 지원합니다.
  • 피드백 메시지는 브라우저 기본값 (브라우저마다 다르며 CSS를 통해 스타일이 지정되지 않음) 또는 추가 HTML 및 CSS가 포함된 사용자 정의 피드백 스타일을 사용할 수 있습니다.
  • setCustomValidityJavaScript에서 사용자 정의 유효성 메시지를 제공할 수 있습니다 .

이를 염두에 두고 사용자 정의 양식 유효성 검사 스타일, 선택적 서버 측 클래스 및 브라우저 기본값에 대한 다음 데모를 고려하십시오.

사용자 정의 스타일

사용자 지정 부트스트랩 양식 유효성 검사 메시지의 경우 novalidate부울 속성을 <form>. 이렇게 하면 브라우저 기본 피드백 도구 설명이 비활성화되지만 JavaScript의 양식 유효성 검사 API에 대한 액세스는 계속 제공됩니다. 아래 양식을 제출해 보십시오. JavaScript가 제출 버튼을 가로채서 피드백을 전달합니다. 제출을 시도하면 양식 컨트롤에 적용된 :invalid및 스타일이 표시됩니다.:valid

사용자 정의 피드백 스타일은 사용자 정의 색상, 테두리, 초점 스타일 및 배경 아이콘을 적용하여 피드백을 더 잘 전달합니다. s의 배경 아이콘 <select>은 에서만 사용할 수 있으며 에서는 사용할 수 .custom-select없습니다 .form-control.

좋아 보인다!
좋아 보인다!
유효한 도시를 입력하세요.
유효한 상태를 선택하십시오.
유효한 우편번호를 입력하세요.
제출하기 전에 동의해야 합니다. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

브라우저 기본값

사용자 지정 유효성 검사 피드백 메시지 또는 양식 동작을 변경하기 위해 JavaScript를 작성하는 데 관심이 없으십니까? 좋습니다. 브라우저 기본값을 사용할 수 있습니다. 아래 양식을 제출해 보세요. 브라우저와 OS에 따라 약간 다른 스타일의 피드백이 표시됩니다.

이러한 피드백 스타일은 CSS로 스타일을 지정할 수 없지만 JavaScript를 통해 피드백 텍스트를 사용자 정의할 수 있습니다.

<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

서버 측

클라이언트 측 유효성 검사를 사용하는 것이 좋지만 서버 측 유효성 검사가 필요한 경우 및 를 사용하여 유효하지 않고 유효한 양식 필드를 나타낼 수 .is-invalid있습니다 .is-valid. 이러한 .invalid-feedback클래스에서도 지원됩니다.

잘못된 필드의 경우 잘못된 피드백/오류 메시지가 를 사용하여 관련 양식 필드와 연결되어 있는지 확인합니다 aria-describedby. id이 속성은 필드가 이미 추가 양식 텍스트를 가리키는 경우 둘 이상의 참조를 허용합니다.

좋아 보인다!
좋아 보인다!
유효한 도시를 입력하세요.
유효한 상태를 선택하십시오.
유효한 우편번호를 입력하세요.
제출하기 전에 동의해야 합니다. 
<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div id="validationServer04Feedback" class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
      <div id="validationServer05Feedback" class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div  id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

지원되는 요소

유효성 검사 스타일은 다음 양식 컨트롤 및 구성 요소에 사용할 수 있습니다.

  • <input>s와 <textarea>s와.form-control
  • <select>와 함께 .form-control또는.custom-select
  • .form-check에스
  • .custom-checkboxs와 .custom-radios
  • .custom-file
텍스트 영역에 메시지를 입력하세요.
잘못된 피드백 텍스트의 예
잘못된 피드백 텍스트 추가 예시
잘못된 맞춤 선택 피드백의 예
잘못된 사용자 지정 파일 피드백의 예
@
잘못된 입력 그룹 피드백의 예
잘못된 입력 그룹 피드백의 예
잘못된 입력 그룹 피드백의 예 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="mb-3">
    <select class="custom-select" required>
      <option value="">Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file mb-3">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <span class="input-group-text" id="validatedInputGroupPrepend">@</span>
      </div>
      <input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <label class="input-group-text" for="validatedInputGroupSelect">Options</label>
      </div>
      <select class="custom-select" id="validatedInputGroupSelect" required>
        <option value="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="input-group is-invalid">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
      <label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
    </div>
    <div class="input-group-append">
       <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
  </div>
  <div class="invalid-feedback">
    Example invalid input group feedback
  </div>
</form>

툴팁

양식 레이아웃에서 허용하는 경우 스타일이 지정된 도구 설명에 유효성 검사 피드백을 표시 하도록 .{valid|invalid}-feedback클래스를 클래스로 바꿀 수 있습니다 . 툴팁 위치 지정을 위해 .{valid|invalid}-tooltip부모가 있어야 합니다 . position: relative아래 예에서 열 클래스에는 이미 이 항목이 있지만 프로젝트에 다른 설정이 필요할 수 있습니다.

좋아 보인다!
좋아 보인다!
유효한 도시를 입력하세요.
유효한 상태를 선택하십시오.
유효한 우편번호를 입력하세요. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

커스터마이징

$form-validation-states검증 상태는 지도 와 함께 Sass를 통해 사용자 정의할 수 있습니다 . 파일에 있는 이 Sass 맵은 기본 / 검증 상태 _variables.scss를 생성하기 위해 반복됩니다 . 각 주의 색상과 아이콘을 사용자 정의하기 위한 중첩 맵이 포함되어 있습니다. 브라우저에서 지원하는 다른 상태는 없지만 사용자 정의 스타일을 사용하는 상태에서는 더 복잡한 양식 피드백을 쉽게 추가할 수 있습니다.validinvalid

form-validation-state믹스 인을 수정하지 않고 이 값을 사용자 지정하지 않는 것이 좋습니다 .

// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

입력 그룹 유효성 검사

유효성 검사를 통해 입력 그룹 내에서 둥근 모서리가 필요한 요소를 감지하려면 입력 그룹에 추가 .has-validation클래스가 필요합니다.

<div class="input-group has-validation">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>
@
사용자 이름을 선택하세요.

사용자 정의 양식

더 많은 사용자 정의 및 브라우저 간 일관성을 위해 완전히 사용자 정의된 양식 요소를 사용하여 브라우저 기본값을 대체하십시오. 그것들은 의미 체계적이고 접근 가능한 마크업 위에 구축되었으므로 모든 기본 양식 컨트롤에 대한 확실한 대체품입니다.

체크박스와 라디오

각 확인란과 라디오 <input>및 <label>페어링은 <div>사용자 지정 컨트롤을 만들기 위해 래핑됩니다. 구조적으로 이것은 기본 접근 방식과 동일 .form-check합니다.

모든 상태 에 대해 형제 선택자( ~)를 사용하여 사용자 정의 양식 표시기의 스타일을 적절하게 지정합니다. 클래스 와 결합하면 의 상태 를 기반으로 각 항목의 텍스트 스타일을 지정할 수도 있습니다 .<input>:checked.custom-control-label<input>

기본값 <input>을 숨기고 opacity를 사용하여 및 .custom-control-label대신 새 사용자 정의 양식 표시기를 만듭니다. 불행히도 CSS가 해당 요소에서 작동하지 않기 때문에 사용자 정의를 만들 수 없습니다 .::before::after<input>content

체크된 상태에서는 Open Iconic 의 base64 임베디드 SVG 아이콘 을 사용 합니다. 이는 브라우저와 장치 전반에 걸쳐 스타일 지정 및 위치 지정을 위한 최상의 제어 기능을 제공합니다.

체크박스

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

사용자 지정 확인란은 :indeterminateJavaScript를 통해 수동으로 설정할 때 의사 클래스를 활용할 수도 있습니다(지정하기 위해 사용 가능한 HTML 속성이 없음).

jQuery를 사용하는 경우 다음과 같은 것으로 충분합니다.

$('.your-checkbox').prop('indeterminate', true)

라디오

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

인라인

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

장애가 있는

사용자 정의 확인란과 라디오도 비활성화할 수 있습니다. disabledboolean 속성을 추가하면 <input>사용자 지정 표시기 및 레이블 설명에 자동으로 스타일이 지정됩니다.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
  <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>

스위치

스위치에는 사용자 정의 확인란의 마크업이 있지만 .custom-switch클래스를 사용하여 토글 스위치를 렌더링합니다. 스위치는 disabled속성도 지원합니다.

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

메뉴 선택

사용자 정의 메뉴 는 사용자 정의 스타일을 트리거하기 위해 <select>사용자 정의 클래스만 필요 합니다. .custom-select사용자 정의 스타일은 의 초기 모양 으로 제한되며 브라우저 제한으로 인해 를 <select>수정할 수 없습니다 .<option>

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

또한 유사한 크기의 텍스트 입력과 일치하도록 크고 작은 맞춤 선택 중에서 선택할 수 있습니다.

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

multiple속성도 지원됩니다 .

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

size속성 은 다음과 같습니다.

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

범위

를 사용하여 사용자 지정 <input type="range">컨트롤을 만듭니다 .custom-range. 트랙(배경)과 썸(값)은 모두 브라우저에서 동일하게 표시되도록 스타일이 지정됩니다. IE와 Firefox만이 진행 상황을 시각적으로 표시하는 수단으로 엄지 손가락의 왼쪽이나 오른쪽에서 트랙을 "채우기"를 지원하므로 현재 지원하지 않습니다.

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

범위 입력에는 각각 min및 max— 0및 100에 대한 암시적 값이 있습니다. min및 max속성 을 사용하는 값에 대해 새 값을 지정할 수 있습니다 .

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

기본적으로 범위는 정수 값에 "맞추기"를 입력합니다. 이를 변경하려면 값을 지정할 수 있습니다 step. 아래 예에서는 를 사용하여 단계 수를 두 배로 늘 step="0.5"립니다.

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

파일 탐색기

사용자 지정 파일 입력에 애니메이션 효과를 주기 위해 권장되는 플러그인: bs-custom-file-input , 이것이 현재 문서에서 사용하고 있는 것입니다.

파일 입력은 가장 복잡하며 기능적인 Choose file… 및 선택한 파일 이름 텍스트 와 연결하려면 추가 JavaScript가 필요 합니다.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

<input>를 통해 기본 파일을 숨기고 opacity대신 <label>. 버튼이 생성되고 로 배치됩니다 ::after. 마지막으로 주변 콘텐츠의 적절한 간격을 위해 widthand height를 선언합니다 .<input>

SCSS를 사용하여 문자열 번역 또는 사용자 정의

:lang()의사 클래스 는 "찾아보기" 텍스트를 다른 언어로 번역 하는 데 사용됩니다. $custom-file-text관련 언어 태그 및 현지화된 문자열 을 사용 하여 Sass 변수에 항목을 재정의하거나 추가합니다 . 영어 문자열도 같은 방식으로 사용자 지정할 수 있습니다. 예를 들어, 다음은 스페인어 번역을 추가하는 방법입니다(스페인어의 언어 코드는 es).

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

다음 lang(es)은 스페인어 번역을 위한 사용자 지정 파일 입력에 대한 작업입니다.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

올바른 텍스트를 표시하려면 문서(또는 하위 트리)의 언어를 올바르게 설정해야 합니다. 이것은 다른 방법 중에서 요소 또는 HTTP 헤더 의 속성 을 사용 하여 수행할 수 있습니다.lang<html>Content-Language

HTML로 문자열 번역 또는 사용자 정의

data-browse또한 부트스트랩 은 사용자 정의 입력 레이블에 추가할 수 있는 속성을 사용하여 HTML의 "찾아보기" 텍스트를 번역하는 방법을 제공합니다 (네덜란드어의 예).

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>