フォーム
様々なフォームを作成するための、フォームコントロールのスタイル、レイアウトオプション、カスタムコンポーネントの例と使用方法のガイドライン。
概要
Bootstrapのフォームコントロールは、再起動されたフォームスタイルをクラスで拡張します。これらのクラスを使用して、ブラウザやデバイス間でより一貫性のあるレンダリングを実現するために、カスタマイズされた表示を選択してください。
メール検証、数値選択などの新しい入力コントロールを利用するには、すべての入力に適切なtype属性（例：メールアドレスにはemail、数値情報にはnumber）を使用してください。
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="name@example.com">
</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ブール属性を追加します。読み取り専用の入力は（無効化された入力と同様に）色が薄くなりますが、標準のカーソルは保持されます。
<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@example.com">
</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@example.com">
</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>チェックボックスとラジオボタン
デフォルトのチェックボックスとラジオボタンは、.form-checkの助けを借りて改善されています。これは、両方の入力タイプに単一のクラスを提供し、HTML要素のレイアウトと動作を改善します。チェックボックスはリストから1つ以上のオプションを選択するためのもので、ラジオボタンは多数のオプションから1つのオプションを選択するためものです。
無効化されたチェックボックスとラジオボタンがサポートされています。disabled属性は、入力の状態を示すために薄い色を適用します。
チェックボックスとラジオボタンは、HTMLベースのフォーム検証をサポートし、簡潔でアクセスしやすいラベルを提供します。そのため、<input>と<label>は、<label>内の<input>ではなく、兄弟要素となっています。これは、<input>と<label>を関連付けるためにid属性とfor属性を指定する必要があるため、少し冗長です。
デフォルト (スタック)
デフォルトでは、直接の兄弟であるチェックボックスとラジオボタンは、.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に.form-check-inlineを追加することで、同じ水平行にチェックボックスまたはラジオボタングループを作成します。
<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>ラベルなし
ラベルテキストのない.form-check内の入力に.position-staticを追加します。支援技術のために、何らかの形式のアクセス可能な名前（例えば、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>、<div>、またはほぼすべての他の要素で使用できます。
<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-*-*クラスを使用してラベルとコントロールの幅を指定することにより、グリッドを使用して横並びフォームを作成します。関連付けられたフォームコントロールと垂直方向に中央揃えされるように、<label>にも.col-form-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>横並びフォームのラベルサイズ
.form-control-lgと.form-control-smのサイズに正しく従うために、<label>または<legend>に.col-form-label-smまたは.col-form-label-lgを使用してください。
<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>列のサイズ変更
前の例で示したように、グリッドシステムでは、.rowまたは.form-row内に任意の数の.colを配置できます。それらは利用可能な幅を均等に分割します。また、.col-7などの特定の列クラスを使用して、列のサブセットがより多くのスペースを占有するように選択することもできます。残りの.colは残りを均等に分割します。
<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クラスを使用して、一連のラベル、フォームコントロール、およびボタンを単一の水平行に表示します。インラインフォーム内のフォームコントロールは、デフォルトの状態とはわずかに異なります。
- コントロールは
display: flexであり、HTMLの空白をすべて折りたたみ、スペーシングおよびフレックスボックスユーティリティを使用して配置制御を提供できるようにします。 - コントロールと入力グループは、Bootstrapのデフォルトの
width: 100%をオーバーライドするためにwidth: autoを受け取ります。 - モバイルデバイスの狭いビューポートに対応するために、コントロールは**少なくとも576px幅のビューポートでのみインラインで表示されます**。
（以下に示すように）スペーシングユーティリティを使用して、個々のフォームコントロールの幅と配置を手動で調整する必要がある場合があります。最後に、.sr-onlyを使用してスクリーンリーダー以外の訪問者から非表示にする必要がある場合でも、必ず各フォームコントロールに<label>を含めてください。
<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（以前はv3では.help-blockとして知られていました）を使用して作成できます。インラインヘルプテキストは、任意のインラインHTML要素と.text-mutedなどのユーティリティクラスを使用して柔軟に実装できます。
ヘルプテキストとフォームコントロールの関連付け
ヘルプテキストは、aria-describedby属性を使用して、関連するフォームコントロールに明示的に関連付ける必要があります。これにより、スクリーンリーダーなどの支援技術が、ユーザーがコントロールにフォーカスしたり、コントロールに入力したりしたときに、このヘルプテキストを読み上げるようになります。
入力の下のヘルプテキストは、.form-textでスタイル設定できます。このクラスにはdisplay: blockが含まれており、上の入力からの簡単な間隔のために上部マージンが追加されています。
<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>無効化されたフォーム
ユーザーの操作を防ぎ、外観を明るくするには、入力にdisabledブール属性を追加します。
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
内のすべてのコントロールを無効にするには、<fieldset>にdisabled属性を追加します。
<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>アンカーに関する注意事項
ブラウザは、<fieldset disabled>内のすべてのネイティブフォームコントロール（<input>、<select>、および<button>要素）を無効として扱い、キーボードとマウスの両方の操作を妨げます。
ただし、フォームに<a ... class="btn btn-*">のようなカスタムボタンのような要素も含まれている場合、これらにはpointer-events: noneのスタイルのみが適用されます。ボタンの無効状態に関するセクション（具体的にはアンカー要素のサブセクション）で説明されているように、このCSSプロパティはまだ標準化されておらず、Internet Explorer 10では完全にサポートされていません。アンカーベースのコントロールは、キーボードを使用してフォーカス可能で操作可能です。フォーカスを受け取らないようにするには、tabindex="-1"を追加し、支援技術に状態を通知するには、aria-disabled="disabled"を追加して、これらのコントロールを手動で変更する必要があります。
クロスブラウザ互換性
Bootstrapはこれらのスタイルをすべてのブラウザに適用しますが、Internet Explorer 11以前は、<fieldset>のdisabled属性を完全にサポートしていません。これらのブラウザでフィールドセットを無効にするには、カスタムJavaScriptを使用してください。
検証
HTML5フォーム検証を使用して、ユーザーに価値のある、実用的なフィードバックを提供します - サポートされているすべてのブラウザで使用できます。ブラウザのデフォルトの検証フィードバックから選択するか、組み込みのクラスとスターターJavaScriptを使用してカスタムメッセージを実装します。
仕組み
Bootstrapでのフォーム検証のしくみ
- HTMLフォーム検証は、CSSの2つの擬似クラス、
:invalidと:validを介して適用されます。これは、<input>、<select>、および<textarea>要素に適用されます。 - Bootstrapは、
:invalidおよび:validスタイルのスコープを、通常は<form>に適用される親.was-validatedクラスに設定します。そうしないと、値のない必須フィールドはすべて、ページの読み込み時に無効として表示されます。このようにして、いつアクティブにするかを選択できます（通常はフォームの送信が試行された後）。 - フォームの外観をリセットするには（たとえば、AJAXを使用した動的フォーム送信の場合）、送信後に
<form>から.was-validatedクラスを再度削除します。 - フォールバックとして、擬似クラスの代わりに
.is-invalidおよび.is-validクラスをサーバー側検証に使用できます。.was-validated親クラスは必要ありません。 - CSSの動作方法の制約により、カスタムJavaScriptを使用せずに、DOM内のフォームコントロールの前にある
<label>にスタイルを適用することはできません（現時点では）。 - すべての最新のブラウザは、制約検証API（フォームコントロールを検証するための一連のJavaScriptメソッド）をサポートしています。
- フィードバックメッセージは、ブラウザのデフォルト（ブラウザごとに異なり、CSSでスタイルを設定できない）または追加のHTMLとCSSを使用したカスタムフィードバックスタイルを利用できます。
- JavaScriptで
setCustomValidityを使用してカスタムの有効性メッセージを提供できます。
それを念頭に置いて、カスタムフォーム検証スタイル、オプションのサーバー側クラス、およびブラウザのデフォルトの次のデモを検討してください。
カスタムスタイル
カスタムBootstrapフォーム検証メッセージの場合は、<form>にブール属性novalidateを追加する必要があります。これにより、ブラウザのデフォルトのフィードバックツールチップが無効になりますが、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>対応要素
検証スタイルは、次のフォームコントロールとコンポーネントで使用できます
.form-controlを使用した<input>と<textarea>.form-controlまたは.custom-selectを使用した<select>.form-check.custom-checkboxと.custom-radio.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>カスタマイズ
検証状態は、$form-validation-statesマップを使用してSassでカスタマイズできます。_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と同じアプローチです。
:checkedなどのすべての<input>状態に兄弟セレクター（~）を使用して、カスタムフォームインジケーターを適切にスタイル設定します。.custom-control-labelクラスと組み合わせると、<input>の状態に基づいて各アイテムのテキストのスタイルを設定することもできます。
デフォルトの<input>はopacityで非表示にし、.custom-control-labelを使用して、::beforeと::afterで新しいカスタムフォームインジケーターを作成します。残念ながら、CSSのcontentはその要素では機能しないため、<input>だけからカスタムの要素を作成することはできません。
チェックされた状態では、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>カスタムチェックボックスは、JavaScriptを介して手動で設定された場合（指定するためのHTML属性はありません）、:indeterminate擬似クラスも使用できます。
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>無効化
カスタムチェックボックスとラジオも無効にすることができます。<input>にブール属性disabledを追加すると、カスタムインジケーターとラベルの説明のスタイルが自動的に設定されます。
<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>レンジ
.custom-rangeを使用してカスタム<input type="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値を指定します。以下の例では、step="0.5"を使用してステップ数を2倍にします。
<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">ファイルブラウザ
ファイル入力は、最も厄介なものであり、機能的な*ファイルの選択... *と選択されたファイル名のテキストをフックしたい場合は、追加の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で生成および配置されます。最後に、周囲のコンテンツの適切な間隔のために、<input>にwidthとheightを宣言します。
SCSSを使用した文字列の翻訳またはカスタマイズ
:lang()擬似クラスは、「参照」テキストを他の言語に翻訳できるようにするために使用されます。関連する言語タグとローカライズされた文字列を使用して、$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>正しいテキストが表示されるように、ドキュメント（またはそのサブツリー）の言語を正しく設定する必要があります。これは、<html>要素のlang属性またはContent-Language HTTPヘッダーなどを使用して行うことができます。
HTMLを使用した文字列の翻訳またはカスタマイズ
Bootstrapは、カスタム入力ラベルに追加できるdata-browse属性を使用して、HTMLで「参照」テキストを翻訳する方法も提供します（オランダ語の例）
<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>