フォーム Forms

概要

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);