メインコンテンツへスキップ

フォームの概要(Overview)

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

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

※マークアップのないベースのフォームのスタイルは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>

 

フォームテキスト(Form text)旧ヘルプテキスト、v5.0.0-alpha1設定変更

ブロックレベルやインラインレベルのフォームテキストは、.form-text を使用して作成できる。

1. 縦積みフォーム

インプットの下のフォームテキストは、.form-text でスタイル設定できる。ブロックレベルの要素を使用する場合は、上のインプットから簡単に間隔が空くように上側にマージンが追加される。

見本
パスワードは、文字と数字を含めて8~20文字で、空白、特殊文字、絵文字を含むことはできません。
Bootstrap5.xの設定例 緑背景が変更箇所
<label for="inputHelpBlock" class="form-label">パスワード</label>
<input type="password" id="inputHelpBlock" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">パスワードは、文字と数字を含めて8~20文字で、空白、特殊文字、絵文字を含むことはできません。</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<label for="inputHelpBlock">パスワード</label>
<input type="password" id="inputHelpBlock" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">パスワードは、文字と数字を含めて8~20文字で、空白、特殊文字、絵文字を含むことはできません。</small>

2. 横並びフォーム

インラインテキストでは、.form-text クラス以外に、通常のインラインHTML要素(<span> など)を使用。

見本
長さは8-20文字でなければなりません
Bootstrap5.xの設定例 緑背景が変更箇所
<form class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">パスワード</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">長さは8-20文字でなければなりません</span>
  </div>
</form>
※Bootstrap4.xの設定例 赤背景が変更箇所
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword">パスワード</label>
    <input type="password" id="inputPassword" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">長さは8-20文字でなければなりません</small>
  </div>
</form>
【設定】
  • 縦積みフォーム:フォームテキストを div.form-text で囲む
  • 横並びフォーム:フォームテキストを span.form-text で囲む
  • スタイルを変更したい場合は、scss/_variables.scss 内の $form-text-*** 変数の値を変更して再コンパイルする
アクセシビリティの設定】
  • <input> には aria-describedby 属性(解説を行うフォームテキストのIDを指定)を入れる
【変更履歴】
  • 【v5.0.0-alpha1】
    • 縦積みフォーム:small.form-text.text-muteddiv.form-text
    • 横並びフォーム:small.text-mutedspan.form-text
    • .form-text にあらかじめフォントサイズや色などが組み込まれたので、<small>.text-muted の設定は不要に

 

無効のフォーム(Disabled forms)

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

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

見本
設定例
<input type="text" class="form-control" id="disabledInput" placeholder="ここは無効..." disabled>
【設定】
  • 無効化したいコントロール(<input>, <select>, <textarea>)に 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>
【設定】
  • <fieldset>disabled 属性を入れる

 

アクセシビリティ(Accessibility)

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

可視の <label> や適切なテキストコンテンツを含めることができない状況では、次のようなアクセス可能な名前を提供する別の方法がある:

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

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

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

 

Sass v5.0.0-beta3追加

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

変数(Variables)

$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:      $border-width;