フォーム
多様なフォームを作成するためのフォームコントロールのスタイル、レイアウトオプション、およびカスタムコンポーネントのサンプルと使用ガイドライン。
概要
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>無効なフォーム
ユーザーの操作を防止し、より薄く表示するために、入力に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コンテンツ）を使用すると、支援技術のユーザーにはメリットがありますが、可視ラベルテキストがないと、特定のユーザーにとっては問題になる可能性があります。一般に、アクセス性とユーザビリティの両方にとって、何らかの形式の可視ラベルが最適なアプローチです。
CSS
多くのフォーム変数は、個々のフォームコンポーネントで再利用および拡張されるように、一般的なレベルで設定されます。これらは、$input-btn-*および$input-*変数として最も頻繁に表示されます。
Sass変数
$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: $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);