Bootstrap 表单

この章では、Bootstrapを使用してフォームを作成する方法を学びます。Bootstrapは、いくつかの簡単なHTMLタグと拡張クラスを使用して、さまざまなスタイルのフォームを作成できます。

表单布局

Bootstrap は次のタイプのフォームレイアウトを提供します：

• 垂直フォーム（デフォルト）
• 内联表单
• 水平表单

垂直または基本フォーム

基本的なフォーム構造はBootstrapに組み込まれており、個々のフォームコントロールは自動的にいくつかのグローバルスタイルを受け取ります。以下に、基本的なフォームを作成する手順を示します：

• 親の <form> 要素に追加role="form"。
• ラベルとコントロールを、class を持つ.form-groupの <div> の中に置きます。これは最適な間隔を得るために必要です。
• すべてのテキスト要素 <input>、<textarea>、<select> に class=" を追加form-control" 。

結果は次のとおりです：

内联表单

すべての要素がインラインで左揃え、ラベルが並んでいるフォームを作成する必要がある場合は、<form> タグに class を追加します.form-inline。

結果は次のとおりです：

• デフォルトでは、Bootstrapの input、select、textarea は幅100%です。インラインフォームを使用する場合は、フォームコントロールに幅を設定する必要があります。
• 使用 class.sr-only、インラインフォームのラベルを非表示にすることができます。

水平表单

水平フォームは、他のフォームとはマークアップの量だけでなく、フォームの表示形式も異なります。水平レイアウトのフォームを作成するには、次の手順に従います：

• 親の <form> 要素に class を追加.form-horizontal。
• ラベルとコントロールを、class を持つ.form-groupの <div> 中。
• ラベルに class を追加.control-label。

結果は次のとおりです：

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

Bootstrap は最も一般的なフォームコントロールをサポートしており、主にinput、textarea、checkbox、radio および select。

入力フィールド（Input）

最も一般的なフォームテキストフィールドは入力ボックス input です。ユーザーはその中に必要なフォームデータのほとんどを入力できます。Bootstrapは、すべてのネイティブHTML5の input タイプをサポートしています：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、telとcolor。適切なtype宣言は必須であり、これにより～を可能にします。input完全なスタイルを取得します。

結果は次のとおりです：

テキストエリア（Textarea）

複数行の入力が必要な場合は、テキストボックス textarea を使用できます。必要に応じて変更できますrows属性（行が少ない = 小さいボックス、行が多い = 大きいボックス）。

結果は次のとおりです：

チェックボックス（Checkbox）とラジオボタン（Radio）

チェックボックスとラジオボタンは、ユーザーが一連の事前設定されたオプションから選択できるようにするために使用されます。

• フォームを作成するとき、ユーザーにリストから複数のオプションを選択させたい場合は、次を使用しますcheckbox。ユーザーが1つのオプションしか選択できないように制限する場合は、次を使用しますradio。
• 一連のチェックボックスとラジオボタンに使用します。.checkbox-inline 或 .radio-inlineclass を使用して、それらを同じ行に表示するように制御します。

以下の例は、これら2つのタイプ（デフォルトとインライン）を示しています：

結果は次のとおりです：

セレクトボックス（Select）

ユーザーに複数のオプションから選択させたいが、デフォルトでは1つのオプションしか選択できないようにする場合は、選択ボックスを使用します。

• <select> を使用してリストオプションを表示します。通常は、州や数字などユーザーがよく知っている選択リストです。
• 使用multiple="multiple"ユーザーが複数のオプションを選択できるようにします。

以下の例は、これら2つのタイプ（select と multiple）を示しています：

結果は次のとおりです：

静态控件

水平フォーム内のフォームラベルの後にプレーンテキストを配置する必要がある場合は、<p> に class を使用します.form-control-static。

結果は次のとおりです：

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

除いて:focus状態（つまり、ユーザーが input をクリックするか、Tabキーを使用して input にフォーカスしたとき）、Bootstrapは無効な入力ボックスのスタイルも定義し、フォーム検証の class を提供します。

输入框焦点

入力フィールド input が受け取ったとき:focusとき、入力ボックスの輪郭が削除され、同時に適用されますbox-shadow。

無効化された入力フィールド input

入力ボックス input を無効にしたい場合は、単に追加するだけでdisabled属性を追加します。これにより、入力ボックスが無効になるだけでなく、入力ボックスのスタイルと、マウスポインターが要素上にホバーしたときのマウスポインターのスタイルも変更されます。

無効化されたフィールドセット fieldset

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

验证状态

Bootstrap には、エラー、警告、成功メッセージの検証スタイルが含まれています。親要素に適切な class（.has-warning、 .has-error 或 .has-success）を使用すると、検証状態を利用できます。

以下の例は、すべてのコントロールの状態を示しています：

結果は次のとおりです：

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

class をそれぞれ使用できます.input-lgと.col-lg-*フォームの高さと幅を設定します。以下の例はこれを示しています：

結果は次のとおりです：

フォームヘルプテキスト

Bootstrapフォームコントロールは、入力inputにブロックレベルのヘルプテキストを持つことができます。全体の幅を占めるコンテンツブロックを追加するには、<input>の後に使用します。.help-block。以下の例は、この点を示しています：

結果は次のとおりです：

其他扩展