Forms (フォーム)
さまざまな Forms (フォーム) を作成するための control styles (フォームコントロールスタイル)、layout options (レイアウトオプション)、custom components (カスタムコンポーネント) の例と使用ガイドラインです。
Overview
form controls は our Rebooted form styles を拡張します。これらのクラスを使用して、ブラウザやデバイス間でより一貫したレンダリングを行うために、カスタマイズされた表示にします。
電子メールの検証や数値選択などの新しい入力コントロールを利用するには、すべての入力に適切な 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>Form text
Block-level(ブロックレベル) や inline-level(インラインレベル) のフォームテキストは .form-text を用いて作成することができます。
Associating form text with form controls
フォームテキストは 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 forms
入力に 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>Accessibility
すべてのフォームコントロールに適切なアクセシブルな名前を付けて、支援技術のユーザーにその目的を伝えることができるようにします。これを実現する最も簡単な方法は、 <label>要素を使用するか、ボタンの場合は、 <button> ... </ button>コンテンツの一部として十分に説明的なテキストを含めることです。
表示可能な <label>または適切なテキストコンテンツを含めることができない状況では、次のようなアクセシブルな名前を提供する別の方法があります。:
.visually-hiddenクラスを使用して非表示にされた<label>要素aria-labelledbyを使用してラベルとして機能できる既存の要素を指すtitle属性を提供するaria-labelを使用して要素にアクセス可能な名前を明示的に設定する
これらのいずれも存在しない場合は, 支援技術は、 <input>および <textarea>要素のアクセス可能な名前のフォールバックとして placeholder属性を使用するできます。このセクションの例は、いくつかの提案された、ケース固有のアプローチを提供します。
視覚的に隠されたコンテンツ（ .visually-hidden、 aria-label、さらにはフォームフィールドにコンテンツが含まれると消える placeholderコンテンツ）を使用することは支援技術ユーザーに利益をもたらしますが、目に見えるラベルテキストの欠如は特定のユーザーにとって問題があります。アクセシビリティと使いやすさの両方の観点から、一般的に、何らかの形式の可視ラベルが最善のアプローチです。
Sass
多くのフォーム変数は一般的なレベルで設定され、個々のフォームコンポーネントで再利用や拡張が可能です。これらは $btn-input-* や $input-* という変数としてよく使います。
Variables
$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: .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;