フォームの概要（Overview）

※HTMLフォームについての解説

• HTML フォームガイド（MDN）

※マークアップのないベースのフォームのスタイルはRebootに掲載。

概要（Overview）

Bootstrapのフォームコントロールは、クラスを使用してRebootのフォームスタイルを拡張する。これらのクラスを使用してカスタマイズされた表示を明示すると、ブラウザとデバイス間で一貫したレンダリングができる。

電子メールの確認、番号の選択などの新しい入力コントロールを利用するには、すべてのinputに適切な type 属性（電子メールアドレス用の email や数値情報用の number など）を必ず使用する。

必要なクラス、フォームレイアウトなどの解説など、Bootstrapフォームのスタイルを簡単に説明する。

見本

設定例

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Eメールアドレス</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">あなたのメールは他の誰とも共有しません。</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">パスワード</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 for="exampleCheck1" class="form-check-label">記憶する</label>
  </div>
  <button type="submit" class="btn btn-primary">送信する</button>
</form>

無効のフォーム（Disabled forms）

input等のコントロールに disabled ブール値属性を追加すると、ユーザーのやりとりを防げる。

1. 個別のコントロールを無効

見本

設定例

<input type="text" class="form-control" id="disabledInput" placeholder="ここは無効..." disabled>

2. フォーム全体を無効

<fieldset> に disabled 属性を追加すると、その中のすべてのコントロールが無効になる。ブラウザは、<fieldset disabled> 内のすべての本来のフォームコントロール（<input>, <select>, <button> 要素）を無効として扱い、キーボードとマウスの両方の操作を防止。

ただしフォームに <a class="btn btn-*">...</a> などのカスタムボタンのような要素も含まれている場合、これらには pointer-events：none のスタイルのみが与えられ、キーボードを使用してフォーカスと操作ができる。この場合、tabindex="-1" を追加してフォーカスを受け取らないようにしてこれらのコントロールを手動で変更し、aria-disabled="disabled" がその状態を支援技術に通知する必要がある。

見本

設定例

<form>
  <fieldset disabled>
    <legend>無効のフィールドセットの例</legend>
    <div class="mb-3">
      <label class="form-label">インプット</label>
      <input type="text" class="form-control" placeholder="入力できません">
    </div>
    <div class="mb-3">
      <label class="form-label">セレクトメニュー</label>
      <select class="form-select">
        <option>選択できません</option>
      </select>
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="disabledCheck">
        <label for="disabledCheck" class="form-check-label">
          チェックできません
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">登録不能</button>
  </fieldset>
</form>

アクセシビリティ（Accessibility）

すべてのフォームコントロールに適切なアクセシビリティに配慮した名前を付けて、それらの目的を支援技術のユーザーに伝えることができるようにする。これを実現する最も簡単な方法は、<label> 要素を使用するか、ボタンの場合は、<button>...</button> コンテンツの一部として十分に説明的なテキストを入れて下さい。

可視の <label> や適切なテキストコンテンツを含めることができない状況では、次のようなアクセシビリティに配慮した名前を提供する別の方法がある：

• .visually-hidden を使用して非表示にされた <label> 要素
• aria-labelledby を使用してラベルとして機能できる既存の要素を指す
• title 属性を提供
• aria-label を使用して要素にアクセシビリティに配慮した名前を明示的に設定

これらのいずれも存在しない場合、支援技術は placeholder 属性を <input> 要素と <textarea> 要素でアクセシビリティに配慮した名前のフォールバックとして使用することに頼ることがある。このセクションの例では、いくつかの提案されたケース固有のアプローチを提供する。

視覚的に非表示のコンテンツ（.visually-hidden, aria-label さらにはフォームフィールドにコンテンツが含まれると表示されなくなる placeholder コンテンツも）を使用すると支援技術のユーザーにメリットがあるが、ラベルテキストが表示されない場合もあり、特定のユーザーにとって問題がある。アクセシビリティとユーザビリティの両方において、一般的に何らかの形の可視ラベルが最善のアプローチである。

CSS v5.0.0-beta3追加、v5.3.0Sassから名称変更

多くのフォーム変数は、個々のフォームコンポーネントによって再利用と拡張されるように、一般的なレベルで設定される。これらは、ほとんどの場合、$input-btn-* 変数と $input-* 変数として表示される。

Sass変数（Sass variables）v5.3.0変数から名称変更

$input-btn-* 変数は、ボタンとフォームコンポーネントの間で共有されるグローバル変数。これらは、他のコンポーネント固有の変数に値として頻繁に再割り当てされる。

デフォルトの設定

scss/_variables.scss 内 input-btn-variables の設定$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:      var(--#{$prefix}border-width);