通常のフォーム

bootstrapを使わない通常のフォームサンプルです。view

Bootstrapを使ったフォームのサンプル

フォーム1(form-vertical)

form-verticalはラベルと入力欄を改行して表示します

フォーム2(form-inline)

form-inlineはラベルと入力欄を改行せずに横一列で表示します

フォーム3(form-search)

form-searchは検索用のフォームを表示します

フォーム4(form-horizontal)

form-horizontalは、複数のラベルと入力欄を整えて表示します。

セレクトボックスのサンプル

セレクトボックス1

セレクトボックスのサンプルです

セレクトボックス2

セレクトボックスの中に検索フォームを作ることもできます

カントリーのサンプル

カントリー1

Load Countriesを押すとjapanが選択されます。

カントリー2

国旗と検索フォームをつけたフォームのサンプルです

州(都道府県)のサンプル

州(都道府県)1

都道府県を選択するフォームのサンプルです。selectタグのdata-country属性で国を指定、data-state属性でデフォルトの州(都道府県)を指定することができます

州(都道府県)2

Bootstrap Form Helpersのselectボックスと組み合わせたサンプルです

州(都道府県)3

国と州を組み合わせたサンプルです。国を選択すると州のセレクトボックスの選択肢が変わります

通貨のサンプル

通貨1

通貨を選択するフォームのサンプルです。data-currencyList属性を設定すると、セレクトボックスに表示する通貨を絞り込むことができます

通貨2

Load Countriesを押すと特定の通貨が選択されます

通貨3

国旗を使った通貨を選択するフォームのサンプルです。cssとimgファイルを読み込ます必要があります

電話番号のサンプル

電話番号1

電話番号を扱うフォームのサンプルです。data-format属性でフォーマットを設定することができます

電話番号2

ディスプレイに表示

電話番号3

国に合わせたフォーマットで電話番号を扱うフォームのサンプルです。data-country属性でその国のフォーマットを設定することができます。

言語のサンプル

言語1

言語を扱うフォームのサンプルです。data-language属性でデフォルトの言語を設定することができます

言語2

国旗をつけた言語を扱うフォームのサンプルです。data-available属性で言語を絞り込むことができます。

タイムゾーンのサンプル

タイムゾーン1

タイムゾーンを扱うフォームのサンプルです。

タイムゾーン2

Bootstrap Form Helpersのselectボックスと組み合わせたサンプルです

タイムゾーン3

国のリストと組み合わせたサンプルです

タイムゾーン4

国のリストとselectボックスを組み合わせたサンプルです

Googleフォントのサンプル

Googleフォント1

Googleのフォントを扱うフォームのサンプルです。data-family属性でデフォルトで選択するフォントを設定できます。

Googleフォント2

Googleのフォントを扱うフォームのサンプルです。data-subsets属性で選択肢を絞り込むことができます

時刻のサンプル

時刻1

時刻を扱うフォームのサンプルです。フォームをクリックして、プルダウンで時刻を選択します。



:

時刻2

時刻を扱うフォームのサンプルです。data-time属性でデフォルトの時刻を設定することができます。



:

フォント種類のサンプル

フォント種類1

検索フォームの付きのフォント種類を扱うフォームのサンプルです。

フォントサイズのサンプル

フォントサイズ1

フォントサイズを扱うフォームのサンプルです。

カレンダーのサンプル

カレンダー1

カレンダーを扱うフォームのサンプルです。

Bootstrap Form Helperを使って出来ること

  1. セレクトボックス
  2. 国情報
  3. 州(都道府県)
  4. 通貨
  5. 電話番号
  6. 言語
  7. タイムゾーン
  8. Googleフォントの種類
  9. Date Picker(日付)
  10. 時刻
  11. フォント種類
  12. フォントのサイズ