in English

フォーム

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

概要

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">
    <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">
  </div>
  <div class="form-group 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">
    </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>

範囲入力

を使用して、水平方向にスクロール可能な範囲の入力を設定し.form-control-rangeます。

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

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

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

無効化されたチェックボックスとラジオがサポートされています。このdisabled属性は、入力の状態を示すのに役立つ明るい色を適用します。

チェックボックスとラジオ ボタンは、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>
<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">
  <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。

<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>
<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 placeholder">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
  </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">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4">
    </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">
    </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">
    </div>
  </div>
  <fieldset class="form-group row">
    <legend class="col-form-label col-sm-2 float-sm-left 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>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <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 sr-only" 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>、またはその他の要素) をユーティリティ クラスだけで使用できます。

長さは 8 ～ 20 文字にする必要があります。 
<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>
    <legend>Disabled fieldset example</legend>
    <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-group">
      <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>
アンカーに関する警告

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

ただし、フォームに などのカスタム ボタンのような要素も含まれている場合<a ... class="btn btn-*">、これらには のスタイルのみが与えられpointer-events: noneます。ボタンの無効状態に関するセクション (特にアンカー要素のサブセクション) で述べたように、この CSS プロパティはまだ標準化されておらず、Internet Explorer 10 では完全にはサポートされていません。フォーカス可能で、キーボードを使用して操作できます。これらのコントロールを手動で変更して、コントロールがtabindex="-1"フォーカスを受け取らないようにし、aria-disabled="disabled"その状態を支援技術に通知するように追加する必要があります。

クロスブラウザの互換性

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

検証

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

現在、クライアント側のカスタム検証スタイルとツールチップは支援技術に公開されていないため、アクセスできないことを認識しています。ソリューションに取り組んでいる間は、サーバー側のオプションまたは既定のブラウザー検証方法のいずれかを使用することをお勧めします。

使い方

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

  • HTML フォームの検証は、CSS の 2 つの疑似クラス:invalidと:valid. <input>、<select>、および<textarea>要素に適用されます。
  • Bootstrap は:invalidと:validスタイルを親.was-validatedクラスにスコープし、通常は に適用されます<form>。そうしないと、値のない必須フィールドがページの読み込み時に無効として表示されます。このようにして、いつアクティブ化するかを選択できます (通常は、フォームの送信が試行された後)。
  • フォームの外観をリセットするには (たとえば、AJAX を使用した動的フォーム送信の場合)、送信後に.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スタイルが適用されていることがわかります。

カスタム フィードバック スタイルは、カスタムの色、境界線、フォーカス スタイル、および背景アイコンを適用して、フィードバックをより適切に伝達します。の背景アイコン<select>は でのみ使用でき、では使用でき.custom-selectません.form-control。

いいね！
いいね！
有効な都市を入力してください。
有効な州を選択してください。
有効な郵便番号を入力してください。
送信する前に同意する必要があります。 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </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" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select 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" 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-6 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </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" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" 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もこれらのクラスでサポートされていることに注意してください。

無効なフィールドについては、 を使用して、無効なフィードバック/エラー メッセージが関連するフォーム フィールドに関連付けられていることを確認しますaria-describedby。idこの属性は、フィールドがすでに追加のフォーム テキストを指している場合に、複数を参照できるようにします。

いいね！
いいね！
有効な都市を入力してください。
有効な州を選択してください。
有効な郵便番号を入力してください。
送信する前に同意する必要があります。 
<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </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" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div id="validationServer04Feedback" class="invalid-feedback">
        Please select 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" aria-describedby="validationServer05Feedback" required>
      <div id="validationServer05Feedback" 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" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div  id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

サポートされている要素

検証スタイルは、次のフォーム コントロールとコンポーネントで使用できます。

  • <input>s と<textarea>s.form-control
  • <select>.form-controlまたは_.custom-select
  • .form-checks
  • .custom-checkboxs と.custom-radios
  • .custom-file
テキストエリアにメッセージを入力してください。
無効なフィードバック テキストの例
その他の無効なフィードバック テキストの例
無効なカスタム セレクト フィードバックの例
無効なカスタム ファイルのフィードバックの例
@
無効な入力グループのフィードバックの例
無効な入力グループのフィードバックの例
無効な入力グループのフィードバックの例 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <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="mb-3">
    <select class="custom-select" required>
      <option value="">Choose...</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 mb-3">
    <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>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <span class="input-group-text" id="validatedInputGroupPrepend">@</span>
      </div>
      <input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <label class="input-group-text" for="validatedInputGroupSelect">Options</label>
      </div>
      <select class="custom-select" id="validatedInputGroupSelect" required>
        <option value="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="input-group is-invalid">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
      <label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
    </div>
    <div class="input-group-append">
       <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
  </div>
  <div class="invalid-feedback">
    Example invalid input group feedback
  </div>
</form>

ツールチップ

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

いいね！
いいね！
有効な都市を入力してください。
有効な州を選択してください。
有効な郵便番号を入力してください。 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </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" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select 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" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

カスタマイズ

検証状態は、マップを使用して Sass を介してカスタマイズでき$form-validation-statesます。私たちの_variables.scssファイルにあるこの Sass マップは、デフォルトvalid/invalid検証状態を生成するためにループされます。各州の色とアイコンをカスタマイズするためのネストされたマップが含まれています。ブラウザーでサポートされている他の状態はありませんが、カスタム スタイルを使用している場合は、より複雑なフォーム フィードバックを簡単に追加できます。

ミックスインを変更せずにこれらの値をカスタマイズすることはお勧めしませんform-validation-state。

// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

入力グループの検証

検証を使用して入力グループ内で角を丸くする必要がある要素を検出するには、入力グループに追加.has-validationのクラスが必要です。

<div class="input-group has-validation">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>
@
ユーザー名を選択してください。

カスタム フォーム

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

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

各チェックボックス、ラジオ<input>、およびペアリングは、カスタム コントロールを作成するために<label>ラップされます。<div>構造的には、これはデフォルトと同じアプローチです.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="customRadioInline" 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="customRadioInline" 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="customCheckDisabled1" disabled>
  <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>

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

スイッチ

スイッチにはカスタム チェックボックスのマークアップがありますが、.custom-switchクラスを使用してトグル スイッチをレンダリングします。スイッチもdisabled属性をサポートします。

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

メニューを選択

カスタム<select>メニューは.custom-select、カスタム スタイルをトリガーするために、カスタム クラスのみを必要とします。カスタム スタイルは<select>の最初の外観に制限されており<option>、ブラウザの制限により を変更することはできません。

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

範囲

でカスタム<input type="range">コントロールを作成します.custom-range。トラック (背景) とつまみ (値) はどちらも、ブラウザー間で同じように表示されるようにスタイル設定されています。進行状況を視覚的に示す手段として、親指の左または右からトラックを「埋める」ことをサポートしているのは IE と Firefox のみであるため、現時点ではサポートしていません。

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

min範囲入力には、およびmax—0およびの暗黙的な値が100それぞれあります。minおよびmax属性を使用して、新しい値を指定できます。

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

デフォルトでは、範囲入力は整数値に「スナップ」します。これを変更するには、step値を指定できます。以下の例では、 を使用してステップ数を 2 倍にしていstep="0.5"ます。

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

ファイルブラウザ

カスタム ファイル入力をアニメーション化するための推奨プラグイン: bs-custom-file-input。これは、ドキュメントで現在使用しているものです。

ファイル入力は最も厄介で、機能的な [ 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>

SCSS を使用した文字列の翻訳またはカスタマイズ

: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

HTML を使用した文字列の翻訳またはカスタマイズ

data-browseBootstrap は、カスタム入力ラベルに追加できる属性を使用して、HTML の「Browse」テキストを翻訳する方法も提供します(オランダ語の例)。

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>