概要
フォームコントロールはリブートしたフォームのスタイルを拡張します。これらのクラスを使用して、ブラウザやデバイス間でより一貫したレンダリングを行うために、カスタマイズされた表示にします。
電子メールの検証や数値選択などの新しい入力コントロールを利用するには、すべての入力に適切なtype属性を使用するようにしてください (例: 電子メールのアドレスにはemail、数値情報にはnumber)。
フォームスタイルの簡単な例です。 必要に応じて、適切なクラス、フォームレイアウトなどのドキュメントを読んでください。
<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>フォームの無効化
入力にdisabled属性(Boolean)を追加することができます。下記の例をご覧ください。
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
disabled属性を<fieldset>に追加して、その中のすべてのコントロールを無効にします。 ブラウザは、<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コンテンツ）を使用することは支援技術ユーザーに利益をもたらしますが、目に見えるラベルテキストの欠如は特定のユーザーにとって問題があります。アクセシビリティと使いやすさの両方の観点から、一般的に、何らかの形式の可視ラベルが最善のアプローチです。
CSS
多くのフォーム変数は一般的なレベルで設定され、個々のフォームコンポーネントで再利用や拡張が可能です。これらは$btn-input-*や$input-*という変数としてよく使います。
Sass変数
$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: $focus-ring-width;
$input-btn-focus-color-opacity: $focus-ring-opacity;
$input-btn-focus-color: $focus-ring-color;
$input-btn-focus-blur: $focus-ring-blur;
$input-btn-focus-box-shadow: $focus-ring-box-shadow;
$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: var(--#{$prefix}border-width);