양식
다양한 양식을 만들기 위한 양식 컨트롤 스타일, 레이아웃 옵션 및 사용자 지정 구성 요소에 대한 예제 및 사용 지침입니다.
개요
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. 블록 수준 요소가 사용되는 경우 위의 입력과 쉽게 간격을 둘 수 있도록 위쪽 여백이 추가됩니다.
<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
<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양식 필드에 콘텐츠가 있으면 사라지는 콘텐츠)를 사용하면 보조 기술 사용자에게 도움이 되지만, 특정 사용자에게는 레이블 텍스트가 보이지 않는 것이 여전히 문제가 될 수 있습니다. 어떤 형태의 가시적 레이블은 일반적으로 접근성과 유용성 모두에서 가장 좋은 접근 방식입니다.
사스
많은 양식 변수는 개별 양식 구성 요소에서 재사용 및 확장할 수 있도록 일반적인 수준에서 설정됩니다. $input-btn-*가장 자주 및 $input-*변수 로 볼 수 있습니다.
변수
$input-btn-*변수는 버튼 과 양식 구성 요소 간에 공유되는 전역 변수입니다. 다른 구성 요소별 변수에 값으로 재할당되는 경우가 많습니다.
$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;