개요
Bootstrap의 폼 컨트롤은 Reboot된 폼 스타일과 함께 사용합니다. 이 클래스를 사용해 재정의 된 표시를 선택하면 브라우저나 기기 간에 보다 일관된 렌더링을 적용시킬 수 있습니다.
메일 인증이나 숫자 선택 등의 새로운 입력 컨트롤을 사용하기 위해 모든 입력에 적절한 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>폼 텍스트
블록 라벨(block-level) 또는 인라인 라벨(inline-level)의 폼 텍스트는 .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>
<fieldset>에 disabled 속성을 추가하면 그 안의 모든 폼 컨트롤이 비활성화됩니다. 브라우저는 <fieldset disabled> 내의 모든 기본 폼 컨트롤(<input>, <select>, 그리고 <button> 요소)을 비활성화시키면서 키보드와 마우스의 양쪽 조작을 막습니다.
그러나, 만약에 폼에 <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> 사용이나 적절한 텍스트를 콘텐츠로 포함시킬 수 없을 경우에는 다음과 같은 접근 가능한 이름을 제공하는 대체 방법이 있습니다:
.visually-hidden클래스를 사용해 숨긴<label>요소aria-labelledby를 사용하여 라벨로써 기능 할 만한 기존 요소를 지정title속성을 제공aria-label을 사용하여 요소에 액세스 가능한 이름을 명시적으로 설정
이들 모두가 존재하지 않을 경우 지원 기술은 <input> 및 <textarea> 요소의 접근 가능한 placeholder 속성을 사용할 수 있습니다. 이곳의 예시에서는 몇 가지 제안된 사례별 접근 방식을 제공하고 있습니다.
시각적으로 숨긴 콘텐츠(.visually-hidden, aria-label, 그리고 더 나아가 폼 필드에 콘텐츠가 입력되면 사라지는 placeholder 콘텐츠)를 사용하는 것은 지원 기술 사용자에게 유익할 수 있지만, 가시화된 라벨 텍스트가 없는 것은 다른 특정 사용자에게는 여전히 문제가 될 수 있습니다. 따라서 접근성과 사용성 양쪽의 관점에서 봐도 어떠한 형식으로든 가시화된 라벨을 제공 하는것이 최적의 접근 방식입니다.
Sass
많은 폼 변수들은 일반 수준으로 설정이 되어 있어 각각의 폼 컴포넌트에서 재사용 및 확장됩니다. $btn-input-* 과 $input-*이라는 변수로 자주 볼 수 있습니다.
변수
$btn-input-* 변수는 buttons과 폼 컨트롤 간에 공유되는 글로벌 변수입니다. 이 변수들은 다른 컴포넌트의 고유 변수 값으로 재할당 되고 있습니다.
$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;