in English

フォーム

さまざまなフォームを作成するためのフォームコントロールスタイル、レイアウトオプション、およびカスタムコンポーネントの例と使用ガイドライン。

このページでは

フォームコントロール 複数の状態をサポートするテキスト入力とテキストエリアをスタイルします。

選択する カスタムの初期外観を使用して、ブラウザーの既定の選択要素を改善します。

チェック＆ラジオ 入力オプションを選択するには、フォームでカスタムラジオボタンとチェックボックスを使用します。

範囲ブラウザのデフォルトの範囲入力をカスタムバージョンに置き換えます。

入力グループ 入力にラベルとボタンを付けて、セマンティックな価値を高めます。

フローティングラベル 入力フィールドに浮かぶ美しくシンプルなフォームラベルを作成します。

レイアウト フォームを使用して、インライン、水平、または複雑なグリッドベースのレイアウトを作成します。

検証カスタムまたはネイティブの検証動作とスタイルでフォームを検証します。

概要

Bootstrap のフォームコントロールは、Rebooted フォームスタイルをクラスで拡張します。これらのクラスを使用して、カスタマイズされた表示をオプトインし、ブラウザーとデバイス間でより一貫したレンダリングを実現します。

すべての入力 (電子メールアドレスや数値情報など)で適切なtype属性を使用して、電子メールの検証、数値の選択などの新しい入力コントロールを利用してください。emailnumber

Bootstrap のフォームスタイルを示す簡単な例を次に示します。必要なクラス、フォームレイアウトなどに関するドキュメントを読み続けてください。

html

<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。

フォームテキストとフォームコントロールの関連付け

aria-describedbyフォームテキストは、属性を使用して関連するフォームコントロールに明示的に関連付ける必要があります。これにより、スクリーンリーダーなどの支援技術が、ユーザーがコントロールにフォーカスしたり、コントロールに入ったりしたときに、このフォームテキストを確実に通知します。

入力の下のフォームテキストは、でスタイル設定できます.form-text。ブロックレベルの要素が使用される場合、上部の入力から簡単に間隔を空けるために上部の余白が追加されます。

パスワード

パスワードは 8 ～ 20 文字の長さで、文字と数字を含み、スペース、特殊文字、または絵文字を含めることはできません。

html

<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

パスワード

長さは 8 ～ 20 文字にする必要があります。

html

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

無効なフォーム

入力に boolean 属性を追加してdisabled、ユーザーの操作を防ぎ、より軽く見えるようにします。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

disabled属性をに追加して、<fieldset>内部のすべてのコントロールを無効にします。ブラウザは、内のすべてのネイティブフォームコントロール ( <input>、<select>、および<button>要素)<fieldset disabled>を無効として扱い、キーボードとマウスの両方の操作を防ぎます。

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

html

<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>なアクセス可能な名前を提供する別の方法があります。

<label>.visually-hiddenクラスを使用して要素を非表示にする
を使用してラベルとして機能できる既存の要素を指すaria-labelledby
title属性の提供
を使用して要素にアクセス可能な名前を明示的に設定するaria-label

これらのいずれも存在しない場合、支援技術は、および要素placeholderのアクセス可能な名前のフォールバックとして属性を使用することに頼る場合があります。このセクションの例では、いくつかの推奨されるケース固有のアプローチを示します。<input><textarea>

視覚的に隠されているコンテンツ ( .visually-hidden、aria-label、さらにplaceholderはフォームフィールドにコンテンツが含まれると消えるコンテンツ) を使用することは支援技術ユーザーにとって有益ですが、ラベルテキストが表示されないことは特定のユーザーにとって依然として問題となる可能性があります。アクセシビリティとユーザビリティの両方の点で、一般に、何らかの形式の可視ラベルが最善のアプローチです。

サス

多くのフォーム変数は一般的なレベルで設定され、個々のフォームコンポーネントによって再利用および拡張されます。$input-btn-*これらはおよび$input-*変数として最もよく見られます。

変数

$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:         .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;

フォーム

概要

フォームテキスト

フォーム テキストとフォーム コントロールの関連付け

無効なフォーム

アクセシビリティ

サス

変数

フォームテキストとフォームコントロールの関連付け