ブートストラップフォーム

本章では、ブートストラップを使用してフォームを作成する方法を学習します。 フォームの異なるスタイルを作成するためにいくつかの簡単なHTMLタグと拡張クラスをブートストラップ。

フォーム・レイアウト

ブートストラップは、フォームレイアウトの次のタイプが用意されています。

• 垂直フォーム（デフォルト）
• インラインフォーム
• 上位フォーム

垂直または基本的な形

フォームの基本的な構造は、ブートストラップは、個々のフォームコントロールは自動的にいくつかのグローバルスタイルを受け取るが付属しています。 ここでは基本的なフォームを作成する手順は次のとおりです。

• 親の<form>要素に役割= "フォーム"を追加します。
• <div>のあるクラス .FORMグループのラベルとコントロール。 これは、最高のピッチを得る必要があります。
• すべてのテキスト要素<input>、<textarea>、およびクラス .FORM-コントロールを追加します<セレクト>。

結果は以下の通りであります：

インラインフォーム

あなたはすべての要素がインラインであることをフォームを作成する必要がある場合は、左整列ラベルが並んであり、<form>タグにクラス .FORMインラインを追加します。

結果は以下の通りであります：

• デフォルトでは、幅の入力、選択、およびtextareaの100％をブートストラップ。 インラインフォームを使用するときは、フォームのコントロールに幅を設定する必要があります。
• クラス.SR-のみを使用して、あなたは、インラインフォームタグを非表示にすることができます。

上位フォーム

さまざまなレベルやフォームの数だけでなく、別のフォームをマークしたが、形が異なる形態が提示されています。 フォームの水平レイアウトを作成するには、いくつかの手順に従います。

• <form>要素は、親クラスの .FORM水平に追加されます。
• <div>のあるクラス .FORMグループのラベルとコントロール。
• ラベルにクラス .control-ラベルを追加します。

結果は以下の通りであります：

サポートされているフォームコントロール

最も一般的なフォームコントロールのためのブートストラップのサポート、主に入力、テキストエリア、チェックボックス、ラジオを選択。

入力ボックス（入力）

最も一般的な形式のテキストフィールドは、入力欄が入力されます。 ユーザーは、その中に必要なフォームデータのほとんどを入力することができます。テキスト、パスワード、日時、日時：ブートストラップを含むネイティブHTML5のすべてのタイプのための入力支援提供-local、日、月、時間、週、番号、電子メール、URL、検索、TEL 、 色を。完全なスタイルの入力を可能にするように適切な型の宣言は、必要とされます。

結果は以下の通りであります：

ボックス（テキストエリア）

あなたは複数行の入力をする必要があるときは、テキストボックスのテキスト領域を使用することができます。 （より少ない行=小さいボックス、ライン=より大きな箱）必要に応じて、行のプロパティを変更することができます。

結果は以下の通りであります：

チェックボックス（チェックボックス）およびラジオボタン（ラジオ）

チェックボックスおよびラジオボタンは、ユーザが予め設定されたオプションの範囲から選択することを可能にするために使用されます。

• フォームを作成する場合は、リストから複数のオプションを選択するユーザーをしたい場合は、 チェックボックスを使用してください。ユーザーがオプションを選択することができます制限する場合は、無線機を使用します。
• チェックボックスとラジオボタンのシリーズは、.checkbox-インラインまたは.radio-インラインクラスを使用するのと同じライン上での表示を制御します。

次の例では、両方のタイプ（デフォルトとインライン）を示しています。

結果は以下の通りであります：

選択ボックス（選択）

ユーザーがいくつかのオプションから選択することが、デフォルトでは、オプションを選択することができますしたい場合には、選択ボックスを使用します。

• 使用した場合は、<select>のような状態や数などのオプション、選択リストに精通している人は通常のもののリストを表示します。
• 複数= "複数"を使用し、ユーザーが複数のオプションを選択することができます。

以下の実施例は、両方のタイプ（選択して、複数の）：

結果は以下の通りであります：

スタティック制御

あなたは、水平formタグでテキスト形式を配置する必要がある場合は、<P>上のクラス.FORM制御用静的を使用してください。

結果は以下の通りであります：

フォームコントロールの状態

また：フォーカス状態（つまり、ユーザーが入力をクリックするか、入力に注力して[Tab]キーを使用）、ブートストラップは、入力ボックスにスタイルを定義無効にし、フォーム検証クラスを提供します。

入力ボックスをフォーカス

入力ボックス入力受信した場合：フォーカスを、輪郭入力ボックスを除去し、 ボックスシャドウを適用します。

入力ボックスの入力を無効にします

あなたが入力ボックスの入力を無効にしたい場合は、単にそれは、入力ボックスを無効にするだけでなく、disabled属性を追加するだけでなく、入力ボックスのスタイルを変更し、マウスポインタが要素のスタイル上のマウスポインタの上に置いたとき。

障害者フィールドセットフィールドセット

上の<フィールドセット> <フィールドセット>内のすべてのコントロールを無効にするには、disabled属性を追加します。

検証ステータス

ブートストラップは、エラー、警告、およびスタイル検証成功メッセージが含まれています。 唯一の親要素は、単に適切なクラス（.has-警告、.has-追加エラーまたは.has-成功）ステータスを確認するために使用することができます。

次の例では、すべての制御状態を示しています。

結果は以下の通りであります：

フォームコントロールのサイズ

あなたは、フォームの高さと幅を設定する.input-LGと.COL-lg- *各クラスを使用することができます 。 次の例では、この点を示しています。

結果は以下の通りであります：

ヘルプテキスト形式

ブートストラップフォーム制御はブロックレベルのヘルプテキストの入力ボックスに入力を持つことができます。.helpブロックを使用した後の<input>に、コンテンツの一部の幅全体を追加するために。次の例では、この点を示しています。

結果は以下の通りであります：