Forms (日本語)

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

概要

Bootstrapのフォームコントロールは、再起動されたフォームスタイルをクラスで拡張します。 これらのクラスを使用して、ブラウザーやデバイス間でより一貫性のあるレンダリングを行うため

すべての入力に適切なtype属性を使用してください（例：,,email電子メールアドレスの場合またはnumber数値情報の場合）電子メールの確認、番号選択などの新しい入力コントロールを利用します。

Bootstrapのフォームスタイルを示す簡単な例を次に示します。 覧いただけるのための書類に必要な授業形式のレイアウトします。

フォームコントロール

カスタムフォームを調べて、<select>s.

ファイル入力については、.form-controlを.form-control-fileに入れ替えます。,

サイジング

.form-control-lgおよび.form-control-smのようなクラスを使用して高さを設定します。

Readonly

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

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

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

<input readonly>プレーンテキストとしてスタイル設定されたフォーム内の要素を使用する場合は、iv id=”f821ff69a3″デフォルトのフォームフィールドのスタイリングを削除し、正しい余白とパディングを保持するクラス。

範囲入力

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

チェックボックスと無線

デフォルトのチェックボックスと無線は、.form-check、HTML要素のレイアウトと動作を改善する両方の入力タイプ チェックボック

無効なチェックボックスと無線がサポートされています。 disabled属性は、入力の状態を示すのに役立つように明るい色を適用します。,

チェックボックスやラジオの利用を支援HTMLのフォームの検証を簡潔に、アクセスを表します。 したがって、<input>と<label>は、<input>内の<label>とは対照的に兄弟要素です。 これは、idおよびfor属性を指定して、<input>および<label>を関連付ける必要があるため、少し冗長です。,

Default(stacked)

デフォルトでは、すぐの兄弟である任意の数のチェックボックスと無線は垂直に積み重ねられ、.form-checkと適切な間隔で配置されます。

インライン

.form-check-inlineを任意の.form-checkに追加することにより、同じ水平行にチェックボックスまたは無線をグループ化します。,

ラベルなし

.position-staticを.form-check内の入力に追加します。ラベルテキストがあります。 支援技術のためのラベルのいくつかの形式を提供することを忘れないでください（たとえば、aria-labelを使用）。,

レイアウト

Bootstrapはdisplay: blockおよびwidth: 100%ほぼすべてのフォームコントロールに適用されるため、フォームはデフォルトで垂直に積み重ねられます。 追加のクラスを使用して、フォームごとにこのレイアウトを変更できます。

フォームグループ

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

フォームグリッド

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

フォーム行

.rowを.form-rowに交換することもできます。

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

Horizontal form

グループを作成するには、.rowクラスを追加し、.col-*-*クラスを使用してラベルとコントロールの幅を指定します。, 必ず追加してください.col-form-labelに<label>関連するフォームコントロールで垂直方向に中央に配置されるようにしてください。

時には、必要な完璧な配置を作成するためにmarginまたはpaddingユーティリティを使用する必要がある場合があります。 たとえば、スタックされた無線入力ラベルのpadding-topを削除して、テキストのベースラインをより適切に揃えました。,

水平フォームラベルサイジング

列サイジング

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

自動サイズ変更

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

その後、サイズ固有の列クラスで再びリミックスすることができます。

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

インラインフォーム

.form-inlineクラスを使用して、単一の水平行に一連のラベル、フォームコントロール、およびボタンを表示します。 インラインフォーム内のフォームコントロールは、既定の状態

• コントロールはdisplay: flexであり、HTML空白を折りたたみ、間隔とflexboxユーティリティで配置制御を提供できます。
• コントロールと入力グループはwidth: autoを受け取り、ブートストラップのデフォルトwidth: 100%をオーバーライドします。,
• コントロールは、モバイルデバ

個々のフォームコントロールの幅と配置に手動で対処する必要がある場合があります間隔ユーティリティ（以下に示すように）。 最後に、<label>を各フォームコントロールに含めるようにしてください。.sr-onlyでスクリーンリーダー以外の訪問者から隠す必要がある場合でも、.sr-only。

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

ヘルプテキスト

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

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

インラインテキストは、ユーティリティクラス以外の何ものでも、典型的なインラインHTML要素（<small>、<span>など）を使用できます。

無効なフォーム

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

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

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

検証

HTML5フォーム検証を使用して、ユーザーに貴重で実用的なフィードバックを提供します–すべてのサポートされているブラウザで利用可能です。 お選びからブラウザのデフォルトの検証、または実装のカスタムメッセージを社内蔵の授業やスターターです。,

仕組み

フォーム検証がブートストラップでどのように機能するかは次のとおりです。

• HTMLフォーム検証は、CSSの二つの擬似クラス、:invalidおよび:validを介して適用されます。 これは、<input>、<select>、および<textarea>要素に適用されます。,
• ブートストラップは、:invalidおよび:validスタイルを親.was-validatedクラスにスコープし、通常は<form>に適用されます。 その他、必要な分野な値を示して無効なページです。 このようにして、いつアクティブにするかを選択できます（通常はフォーム送信が試行された後）。
• フォームの外観をリセットするには(たとえば、AJAXを使用した動的フォーム送信の場合)、.was-validatedクラスを<form>から再度削除します。フォームの外観をリセットするには、<form>フォームの外観をリセットする必要があります。,フォールバックとして、.is-invalidおよび.is-validサーバー側の検証のための擬似クラスの代わりにクラスを使用できます。 彼らは必要ありません.was-validated親クラス。CSSの仕組みの制約のため、カスタムJavaScriptの助けを借りずに、DOMのフォームコントロールの前にある<label>にスタイルを適用することはできません。
• すべての最新ブラウザ支援、制約検証APIでは、JavaScriptの方法の妥当性を検証形式で制御できます。,
• フィードバックメッセージは、ブラウザのデフォルト（ブラウザごとに異なり、CSS経由でスタイル不可能）または追加のHTMLとCSSを持つカスタムフィードバック
• JavaScriptでは、setCustomValidityでカスタム有効性メッセージを提供できます。

これを念頭に置いて、カスタムフォーム検証スタイル、オプションのサーバー側クラス、およびブラウザのデフォルトについて次のデモを検討してくださ,

カスタムスタイル

カスタムブートストラップフォーム検証メッセージの場合、novalidateブール属性を<form>に追加する必要があります。 このオブラウザのデフォルトの声をツールチップがアクセスを提供する形で検証ApiはJavaScriptです。 以下のフォームを送信してみてください;私たちのJavaScriptは送信ボタンを傍受し、あなたにフィードバックを 送信しようとすると、:invalidおよび:validスタイルがフォームコントロールに適用されます。,

カスタムフィードバックスタイ <select>の背景アイコンは、.custom-selectでのみ使用でき、.form-controlでは使用できません。

ブラウザのデフォルト

カスタム検証フィードバックメッセージやフォームの動作を変更するためのJavaScriptの書き込みに興味がありませんか？ すべての良い、あなたはブラウザのデフォルトを使用 み提出する場合に必要となります。 お使いのブラウザやOSによっては、フィードバックのスタイルが若干異なります。,

これらの声タイルできな柱とCSSできカスタマイズのテキストを通じて可能です。

サーバー側

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

サポートされている要素

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

ツールチップ

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

カスタマイズ

検証状態は、$form-validation-statesマップを使用してSassを介してカスタマイズできます。 _variables.scssファイルにあるこのSassマップは、デフォルトのvalid/invalid検証状態を生成するためにループされます。 含まれまでネストしたマップのカスタマイズそれぞれの状態のアイコンで表します。 ながらないその他の国に対応ブラウザによって、利用カスタムスタイルを追加できます複雑なフォルム。,

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

カスタムフォーム

さらにカスタマイズとクロスブラウザの一貫性のために、ブラウザのデフォルトを置き換えるために完全にカスタムフォーム これらはセマンティックでアクセス可能なマークアップの上に構築されているため、既定のフォームコントロールの,

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

各チェックボックスとラジオ<input>と<label>ペアリングは<div>カスタムコントロールを作成 構造的には、これはデフォルトの.form-checkと同じアプローチです。

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

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

チェックされた状態では、Open Iconicのbase64埋め込みSVGアイコンを使用します。 この制御のためのスタイリングおよび位置決め全体のブラウザやデバイス

チェックボックス

カスタムチェックボックスは、JavaScriptを介して手動で設定すると、:indeterminate擬似クラスを利用することもできます（指定できるHTML属性はありません）。,jQueryを使用している場合は、このようなもので十分です。

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

ラジオ

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

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

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

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