bootstrapを使わない通常のフォームサンプルです。view
form-verticalはラベルと入力欄を改行して表示します
form-inlineはラベルと入力欄を改行せずに横一列で表示します
form-searchは検索用のフォームを表示します
form-horizontalは、複数のラベルと入力欄を整えて表示します。
form-vertical
ラベルと入力欄を改行して表示しますform-inline
ラベルと入力欄を改行せずに横一列で表示しますform-search
検索用のフォームを表示しますform-horizontal
複数のラベルと入力欄を整えて表示しますセレクトボックスのサンプルです
セレクトボックスの中に検索フォームを作ることもできます
Load Countriesを押すとjapanが選択されます。
国旗と検索フォームをつけたフォームのサンプルです
都道府県を選択するフォームのサンプルです。selectタグのdata-country属性で国を指定、data-state属性でデフォルトの州(都道府県)を指定することができます
Bootstrap Form Helpersのselectボックスと組み合わせたサンプルです
国と州を組み合わせたサンプルです。国を選択すると州のセレクトボックスの選択肢が変わります
通貨を選択するフォームのサンプルです。data-currencyList属性を設定すると、セレクトボックスに表示する通貨を絞り込むことができます
Load Countriesを押すと特定の通貨が選択されます
国旗を使った通貨を選択するフォームのサンプルです。cssとimgファイルを読み込ます必要があります
電話番号を扱うフォームのサンプルです。data-format属性でフォーマットを設定することができます
ディスプレイに表示
国に合わせたフォーマットで電話番号を扱うフォームのサンプルです。data-country属性でその国のフォーマットを設定することができます。
言語を扱うフォームのサンプルです。data-language属性でデフォルトの言語を設定することができます
国旗をつけた言語を扱うフォームのサンプルです。data-available属性で言語を絞り込むことができます。
タイムゾーンを扱うフォームのサンプルです。
Bootstrap Form Helpersのselectボックスと組み合わせたサンプルです
国のリストと組み合わせたサンプルです
国のリストとselectボックスを組み合わせたサンプルです
Googleのフォントを扱うフォームのサンプルです。data-family属性でデフォルトで選択するフォントを設定できます。
Googleのフォントを扱うフォームのサンプルです。data-subsets属性で選択肢を絞り込むことができます
時刻を扱うフォームのサンプルです。フォームをクリックして、プルダウンで時刻を選択します。
時刻を扱うフォームのサンプルです。data-time属性でデフォルトの時刻を設定することができます。
検索フォームの付きのフォント種類を扱うフォームのサンプルです。
フォントサイズを扱うフォームのサンプルです。
カレンダーを扱うフォームのサンプルです。