フォーム

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

概要

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

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

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

フォームコントロール

カスタムフォームを調べて、 s。

ファイル入力の場合、.form-controlを.form-control-file。

サイズ設定

.form-control-lgや 。

読み取り専用

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

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

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

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

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

無効なチェックボックスとラジオはサポートされていますが、not-allowed親<label>にカーソルを合わせると、disabled属性を。無効な属性は、入力の状態を示すのに役立つ明るい色を適用します。

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

デフォルト（スタック）

デフォルトでは、直接の兄弟であるチェックボックスと無線は垂直にスタックされ、 .form-checkと適切な間隔で配置します。

インライン

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

ラベルなし

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

レイアウト

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

フォームグループ

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

フォームグリッド

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

フォーム行

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

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

水平フォーム

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

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

水平フォームラベルサイズ設定

列のサイズ設定

前の例で示したように、グリッドシステムでは、任意の数の.col.rowまたは.form-row内の/ div>。利用可能な幅を均等に分割します。列のサブセットを選択してスペースを増減することもできますが、残りの.colは、。

自動サイズ設定

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

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

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

インラインフォーム

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

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

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

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

ヘルプテキスト

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

入力の下のヘルプテキストは。このクラスにはdisplay: blockが含まれ、上記の入力との間隔を空けるために上部マージンが追加されます。

インラインテキストでは、一般的なインラインHTML要素（<small>、<span>など）を使用できます。ユーティリティクラスにすぎません。

無効なフォーム

入力にdisabledブール属性を追加して、ユーザーの操作を防ぎ、表示されるようにします軽量化。

ividを追加<fieldset>の= “96eb5a27ef”> 属性を使用して、内のすべてのコントロールを無効にします。

要素）が無効になっているため、キーボードとマウスの両方の操作ができなくなります。ただし、フォームに<a ... class="btn btn-*">要素も含まれている場合、これらにはpointer-events: noneのスタイルのみが与えられます。ボタンの無効状態に関するセクション（特にアンカー要素のサブセクション）に記載されているように、このCSSプロパティはまだ標準化されておらず、Opera18以下またはInternetExplorer10では完全にはサポートされていません。キーボードユーザーがこれらのリンクに焦点を合わせたりアクティブにしたりできないようにしないでください。したがって、安全のために、カスタムJavaScriptを使用してそのようなリンクを無効にしてください。

検証

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

仕組み

Bootstrapでのフォーム検証の仕組みは次のとおりです。

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

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

カスタムスタイル

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

送信しようとすると、:invalidとフォームコントロールに適用されるスタイル。

ブラウザのデフォルト

カスタム検証フィードバックメッセージや、フォームの動作を変更するJavaScriptの記述に興味がありませんか？よし、ブラウザのデフォルトを使用できます。以下のフォームを送信してみてください。ブラウザとOSに応じて、わずかに異なるスタイルのフィードバックが表示されます。

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

サーバー側

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

サポートされている要素

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

ツールチップ

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

カスタムフォーム

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

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

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

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

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

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

チェックボックス

カスタムチェックボックスJavaScriptを介して手動で設定すると、:indeterminate疑似クラスを利用することもできます（指定に使用できるHTML属性はありません）。

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

ラジオ

インライン

無効

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

メニューを選択します

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

また、大小のカスタム選択から選択することもできます。同様のサイズのテキスト入力と一致します。

multiple属性もサポートされています：

size属性と同様に：

ファイルブラウザ

ファイル入力は最も危険です機能的なChoosefile…と選択したファイル名のテキストに接続する場合は、追加のJavaScriptが必要です。

iv id = “729c3を介して、デフォルトファイル<input>を非表示にします10084 “> 代わりに、<label>のスタイルを設定します。ボタンが生成され、::afterで配置されます。最後に、<input>でwidthとheightを宣言して、周囲のコンテンツの適切な間隔を確保します。

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

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

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

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