フォーム

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

概要

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

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

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

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="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>

フォームコントロール

<input>、<select>、およびなどのテキストフォームコントロールは、クラス<textarea>でスタイル設定されます。.form-control一般的な外観、フォーカス状態、サイズ変更などのスタイルが含まれています。

カスタムフォームを調べて、スタイルをさらに進めてください<select>。

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

ファイル入力の場合、をに交換.form-controlし.form-control-fileます。

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

サイジング

.form-control-lgやなどのクラスを使用して高さを設定します.form-control-sm。

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

読み取り専用

readonly入力値の変更を防ぐために、入力に boolean 属性を追加します。読み取り専用の入力は (無効な入力と同じように) 明るく表示されますが、標準のカーソルは保持されます。

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

読み取り専用のプレーンテキスト

<input readonly>フォーム内の要素をプレーンテキストとしてスタイル設定する場合は、クラスを使用して.form-control-plaintextデフォルトのフォームフィールドスタイルを削除し、適切なマージンとパディングを保持します。

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

チェックボックスとラジオ

デフォルトのチェックボックスとラジオは、HTML 要素のレイアウトと動作を改善する両方の入力タイプの単一のクラス.form-checkの助けを借りて改善されています。チェックボックスはリスト内の 1 つまたは複数のオプションを選択するためのもので、ラジオは多数のオプションから 1 つを選択するためのものです。

無効化されたチェックボックスとラジオはサポートされていnot-allowedますが、parent のホバーにカーソルを表示するには、属性を<label>に追加する必要があります。disabled 属性は、入力の状態を示すのに役立つ明るい色を適用します。disabled.form-check-input

チェックボックスとラジオの使用は、HTML ベースのフォーム検証をサポートし、簡潔でアクセスしやすいラベルを提供するように構築されています。そのため、<input>とは、内の<label>ではなく兄弟要素です。andを関連付けるにはand属性を指定する必要があるため、これは少し冗長です。<input><label>idfor<input><label>

デフォルト (スタック)

デフォルトでは、直系の兄弟である任意の数のチェックボックスとラジオが垂直に積み上げられ、適切な間隔で.form-check.

デフォルトのチェックボックス

無効なチェックボックス

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

デフォルトのラジオ

2 番目のデフォルトラジオ

無効化されたラジオ

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check disabled">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

列をなして

.form-check-inlineanyに追加して、チェックボックスまたはラジオを同じ横の行にグループ化します.form-check。

3 (無効)

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

3 (無効)

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

ラベルなし

ラベルテキストを持たない.position-static入力に追加します。.form-check支援技術には何らかの形式のラベルを提供することを忘れないでください (たとえば、を使用aria-label)。

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

レイアウト

Bootstrap はほぼすべてのフォームコントロールに適用されるため、フォームは既定で垂直方向にスタックされますdisplay: block。width: 100%追加のクラスを使用して、フォームごとにこのレイアウトを変更できます。

フォームグループ

クラスは、.form-groupフォームに何らかの構造を追加する最も簡単な方法です。ラベル、コントロール、オプションのヘルプテキスト、およびフォーム検証メッセージの適切なグループ化を促進する柔軟なクラスを提供します。デフォルトではのみ適用されますが、必要に応じmargin-bottomて追加のスタイルが選択さ.form-inlineれます。<fieldset>s、<div>s、またはその他のほぼすべての要素で使用します。

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

フォームグリッド

より複雑なフォームは、グリッドクラスを使用して構築できます。これらは、複数の列、さまざまな幅、および追加の配置オプションを必要とするフォームレイアウトに使用します。

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

フォーム行

.rowまた、標準のグリッド行のバリエーションであるに交換することもでき.form-rowます。これは、デフォルトの列ガターをオーバーライドして、よりタイトでコンパクトなレイアウトを実現します。

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

より複雑なレイアウトもグリッドシステムで作成できます。

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

横型

.rowクラスをフォームグループに追加し、クラスを使用し.col-*-*てラベルとコントロールの幅を指定することにより、グリッドを使用して水平フォームを作成します。関連するフォームコントロールと垂直方向に中央揃えになるように、必ずにも追加.col-form-labelしてください。<label>

場合によっては、マージンまたはパディングユーティリティを使用して、必要な完全な配置を作成する必要があります。たとえばpadding-top、テキストのベースラインをより適切に揃えるために、積み上げられたラジオ入力ラベルのを削除しました。

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

横型ラベルのサイズ変更

とのサイズに正しく従うために、必ず.col-form-label-smまたは.col-form-label-lgを<label>s またはs に使用してください。<legend>.form-control-lg.form-control-sm

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

列のサイズ

前の例で示したように、グリッドシステムでは、または.col内に任意の数のを配置できます。利用可能な幅をそれらの間で均等に分割します。のような特定の列クラスを使用して、列のサブセットを選択してスペースを多かれ少なかれ占有する一方で、残りのは残りを均等に分割することもできます。.row.form-row.col.col-7

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

自動サイズ変更

以下の例では、flexbox ユーティリティを使用してコンテンツを垂直方向に中央揃えし、列が必要なだけのスペースしか占有しないように変更.colし.col-autoています。別の言い方をすれば、内容に基づいて列のサイズが変更されます。

<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

次に、サイズ固有の列クラスでもう一度リミックスできます。

<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

もちろん、カスタムフォームコントロールもサポートされています。

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

インラインフォーム

このクラスを使用して.form-inline、一連のラベル、フォームコントロール、およびボタンを 1 行に表示します。インラインフォーム内のフォームコントロールは、デフォルトの状態とは若干異なります。

コントロールはであり、HTML の空白を折りたたんで、間隔とフレックスボックスユーティリティdisplay: flexを使用して配置コントロールを提供できるようにします。
コントロールと入力グループwidth: autoは、Bootstrap のデフォルトをオーバーライドするために受け取りますwidth: 100%。
コントロールは、モバイルデバイスの狭いビューポートを考慮して、幅が 576 ピクセル以上のビューポートにインラインでのみ表示されます。

間隔ユーティリティを使用して、個々のフォームコントロールの幅と配置を手動で調整する必要がある場合があります(以下を参照)。最後に、を使用してスクリーンリーダー以外の訪問者から非表示にする必要がある場合でも、常に<label>with each form コントロールを含めるようにしてください.sr-only。

<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

カスタムフォームコントロールと選択もサポートされています。

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>

非表示ラベルの代替

すべての入力にラベルを含めないと、スクリーンリーダーなどの支援技術でフォームに問題が発生します。.sr-onlyこれらのインラインフォームでは、クラスを使用してラベルを非表示にできます。aria-label、aria-labelledbyまたはtitle属性など、支援技術のラベルを提供する別の方法があります。これらのいずれも存在しない場合、支援技術は、placeholder存在する場合は属性を使用することに頼ることができますがplaceholder、他のラベル付け方法の代わりにを使用することはお勧めできません。

ヘルプテキスト

.form-textフォーム内のブロックレベルのヘルプテキストは、 (以前.help-blockは v3 と呼ばれていた)を使用して作成できます。インラインヘルプテキストは、インライン HTML 要素やなどのユーティリティクラスを使用して柔軟に実装できます.text-muted。

ヘルプテキストをフォームコントロールに関連付ける

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

入力の下のヘルプテキストは、でスタイル設定できます.form-text。このクラスにはdisplay: block、上の入力から簡単に間隔を空けるためのトップマージンが含まれ、追加されます。

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

<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

インラインテキストでは、典型的なインライン HTML 要素 ( <small>、<span>、またはその他の要素) をユーティリティクラスだけで使用できます。

<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

無効なフォーム

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

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

disabled属性をに追加して、<fieldset>内部のすべてのコントロールを無効にします。

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <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>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

アンカーに関する警告

デフォルトでは、ブラウザーは内のすべてのネイティブフォームコントロール ( <input>、<select>および<button>要素)<fieldset disabled>を無効として扱い、キーボードとマウスの両方の操作を防ぎます。ただし、フォームに<a ... class="btn btn-*">要素も含まれる場合、これらにはのスタイルのみが与えられpointer-events: noneます。ボタンの無効状態に関するセクション (特にアンカー要素のサブセクション) で述べたように、この CSS プロパティはまだ標準化されておらず、Opera 18 以下、または Internet Explorer 10 では完全にサポートされていません。キーボードユーザーがこれらのリンクにフォーカスしたりアクティブにしたりできないようにしないでください。安全のために、カスタム JavaScript を使用してそのようなリンクを無効にしてください。

クロスブラウザの互換性

Bootstrap はこれらのスタイルをすべてのブラウザーに適用しますが、Internet Explorer 11 以前ではdisabled、<fieldset>. カスタム JavaScript を使用して、これらのブラウザーでフィールドセットを無効にします。

検証

サポートされているすべてのブラウザーで利用できるHTML5 フォーム検証を使用して、ユーザーに貴重で実用的なフィードバックを提供します。ブラウザーのデフォルトの検証フィードバックから選択するか、組み込みクラスとスターター JavaScript を使用してカスタムメッセージを実装します。

ネイティブブラウザのデフォルトはスクリーンリーダーに通知されないため、カスタム検証スタイルを強くお勧めします。

使い方

Bootstrap でフォーム検証がどのように機能するかを次に示します。

HTML フォームの検証は、CSS の 2 つの疑似クラス:invalidと:valid. <input>、<select>、および<textarea>要素に適用されます。
Bootstrap は:invalidと:validスタイルを親.was-validatedクラスにスコープし、通常はに適用されます<form>。そうしないと、値のない必須フィールドがページの読み込み時に無効として表示されます。このようにして、いつアクティブ化するかを選択できます (通常は、フォームの送信が試行された後)。
フォールバックとして、サーバー側の検証用の疑似クラスの代わりにクラスを.is-invalid使用できます。親クラスは必要ありません。.is-valid.was-validated
CSS の動作方法の制約により、(現時点では)<label>カスタム JavaScript の助けなしに DOM 内のフォームコントロールの前にあるにスタイルを適用することはできません。
最新のブラウザはすべて、フォームコントロールを検証するための一連の JavaScript メソッドである制約検証 APIをサポートしています。
フィードバックメッセージは、ブラウザーの既定値 (ブラウザーごとに異なり、CSS でスタイル設定できない) または HTML と CSS を追加したカスタムフィードバックスタイルを使用する場合があります。
setCustomValidityJavaScriptでカスタム有効性メッセージを提供できます。

そのことを念頭に置いて、カスタムフォーム検証スタイル、オプションのサーバー側クラス、およびブラウザーの既定値に関する次のデモを検討してください。

カスタムスタイル

カスタム Bootstrap フォームの検証メッセージの場合、novalidateboolean 属性をに追加する必要があります<form>。これにより、ブラウザのデフォルトのフィードバックツールチップが無効になりますが、JavaScript のフォーム検証 API へのアクセスは引き続き提供されます。以下のフォームを送信してみてください。当社の JavaScript が送信ボタンをインターセプトし、フィードバックをあなたに中継します。

:invalid送信しようとすると、フォームコントロールにと:validスタイルが適用されていることがわかります。

ファーストネーム

Looks good!

苗字

Looks good!

ユーザー名

Please choose a username.

街

Please provide a valid city.

州

Please provide a valid state.

ジップ

Please provide a valid zip.

利用規約に同意する

You must agree before submitting.

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

ブラウザのデフォルト

カスタムの検証フィードバックメッセージや、フォームの動作を変更するための JavaScript の作成に興味はありませんか? ブラウザのデフォルトを使用できます。以下のフォームを送信してみてください。ブラウザと OS によっては、フィードバックのスタイルが少し異なります。

これらのフィードバックスタイルは CSS でスタイル設定できませんが、JavaScript を使用してフィードバックテキストをカスタマイズすることはできます。

<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

サーバ側

クライアント側の検証を使用することをお勧めしますが、サーバー側が必要な場合は、無効なフォームフィールドと有効なフォームフィールドを.is-invalidとで示すことができます.is-valid。.invalid-feedbackもこれらのクラスでサポートされていることに注意してください。

ファーストネーム

苗字

ユーザー名

ユーザー名を選択してください。

街

有効な都市を入力してください。

州

有効な州を入力してください。

ジップ

有効な郵便番号を入力してください。

利用規約に同意する

送信する前に同意する必要があります。

<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

サポートされている要素

サンプルフォームは上記のネイティブテキストを示し<input>ていますが、カスタムフォームコントロールでもフォーム検証スタイルを使用できます。

<form class="was-validated">
  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
</form>

ツールチップ

フォームレイアウトで許可されている場合は、.{valid|invalid}-feedbackクラスを.{valid|invalid}-tooltipクラスに交換して、スタイル設定されたツールチップに検証フィードバックを表示できます。ツールチップの配置のために必ず親を持ってくださいposition: relative。以下の例では、列クラスには既にこれがありますが、プロジェクトでは別の設定が必要になる場合があります。

ファーストネーム

苗字

ユーザー名

街

州

ジップ

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

カスタムフォーム

さらにカスタマイズしてブラウザー間の一貫性を保つには、完全にカスタム化されたフォーム要素を使用してブラウザーのデフォルトを置き換えます。これらはセマンティックでアクセス可能なマークアップの上に構築されているため、既定のフォームコントロールを確実に置き換えることができます。

チェックボックスとラジオ

各チェックボックスとラジオは、カスタムコントロールを作成するため<div>の兄弟とそれに付随するテキスト用のでラップされます。構造的には、これはデフォルトと同じアプローチです。<span><label>.form-check

カスタムフォームインジケーターのスタイルを適切に設定~するために、すべての<input>状態 (など) に対して兄弟セレクター ( ) を使用します。:checkedクラスと組み合わせると、の状態.custom-control-labelに基づいて各アイテムのテキストのスタイルを設定することもできます<input>。

でデフォルトを非表示に<input>しopacity、を使用してその場所にと.custom-control-labelで新しいカスタムフォームインジケータを作成します。残念ながら、CSSはその要素では機能しないため、からカスタムのものを構築することはできません。::before::after<input>content

チェックされた状態では、Open Iconicの base64 埋め込み SVG アイコンを使用します。これにより、ブラウザーやデバイス全体でスタイルと配置を最適に制御できます。

チェックボックス

このカスタムチェックボックスをチェックしてください

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

カスタムチェックボックスは、:indeterminateJavaScript を介して手動で設定する場合にも疑似クラスを利用できます (それを指定するための利用可能な HTML 属性はありません)。

このカスタムチェックボックスをチェックしてください

jQuery を使用している場合は、次のようなもので十分です。

$('.your-checkbox').prop('indeterminate', true)

ラジオ

このカスタムラジオを切り替える

または、この他のカスタムラジオを切り替えます

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

列をなして

このカスタムラジオを切り替える

または、この他のカスタムラジオを切り替えます

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

無効

カスタムチェックボックスとラジオも無効にすることができます。disabledboolean 属性をに追加する<input>と、カスタムインジケーターとラベルの説明が自動的にスタイル設定されます。

このカスタムチェックボックスをチェックしてください

このカスタムラジオを切り替える

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
</div>

カスタム<select>メニューは.custom-select、カスタムスタイルをトリガーするために、カスタムクラスのみを必要とします。

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

同様のサイズのテキスト入力に合わせて、大小のカスタム選択から選択することもできます。

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

次のmultiple属性もサポートされています。

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

size属性は次のとおりです。

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

ファイルブラウザ

ファイル入力は最も厄介で、機能的な [ Choose file… ]と選択したファイル名のテキストを使用してそれらを接続する場合は、追加の JavaScript が必要です。

ファイルを選ぶ

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

<input>を介してデフォルトファイルを非表示にしopacity、代わりに<label>. ボタンが生成され、で配置され::afterます。最後に、周囲のコンテンツの適切な間隔のためにwidthandを宣言します。height<input>

文字列の翻訳またはカスタマイズ

:lang()疑似クラスは、「Browse」テキストを他の言語に翻訳できるようにするために使用されます。関連する言語タグとローカライズされた文字列$custom-file-textを使用して、Sass 変数にエントリをオーバーライドまたは追加します。英語の文字列も同じ方法でカスタマイズできます。たとえば、スペイン語の翻訳を追加する方法は次のとおりです (スペイン語の言語コードはです)。es

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

lang(es)スペイン語翻訳用のカスタムファイル入力の動作は次のとおりです。

選択アーカイブ

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

正しいテキストを表示するには、ドキュメント (またはそのサブツリー) の言語を正しく設定する必要があります。これは、他の方法の中でも特に、要素またはHTTP ヘッダーのlang属性を使用して行うことができます。<html>Content-Language

フォーム

概要

フォーム コントロール

サイジング

読み取り専用

読み取り専用のプレーン テキスト

チェックボックスとラジオ

デフォルト (スタック)

列をなして

ラベルなし

レイアウト

フォーム グループ

フォーム グリッド

フォーム行

横型

横型ラベルのサイズ変更

列のサイズ

自動サイズ変更

インラインフォーム

非表示ラベルの代替

ヘルプテキスト

ヘルプ テキストをフォーム コントロールに関連付ける

無効なフォーム

アンカーに関する警告

クロスブラウザの互換性

検証

使い方

カスタム スタイル

ブラウザのデフォルト

サーバ側

サポートされている要素

ツールチップ

カスタム フォーム

チェックボックスとラジオ

チェックボックス

ラジオ

列をなして

無効

メニューを選択

ファイルブラウザ

文字列の翻訳またはカスタマイズ

フォームコントロール

読み取り専用のプレーンテキスト

フォームグループ

フォームグリッド

ヘルプテキストをフォームコントロールに関連付ける

カスタムスタイル

カスタムフォーム