Bootstrapを使えば、フォームを簡単に組み込むことができます。フォームタグを書くだけでは味気ないデザインですが、Bootstrapで書くととてもきれいでバリエーションも豊富ですよ。
form
前章で使用した、ナビゲーションテンプレートにも入っていたフォームの部分です。フォームは、ナビゲーション以外の部分でも使用できます。
では、フォームについて詳しく見ていきましょう。
上は、基本的なフォームの構造です。全体を「form」タグで囲い、１つ１つのフォームは「form-group」というCSSクラスを使い囲います。「label」タグでは入力フォームの概要を記述し、「input」タグで入力欄を作ります。
入力欄には「form-control」というCSSクラスを指定します。このクラスには、入力フォームのデザインなどがテンプレートとして用意されています。
そして最後に「button」タグで送信ボタンを作成します。 CSSクラス部分では、ボタンのデザインを指定する事が出来ます。カラーを変えたい場合は、「primary」という部分を他のカラー名に変えます。カラー一覧はBootstrap公式サイトの「Utilities」という項目内「Colors」に一覧があります。出来上がりのページは以下のようなものになります。
フォームのカスタマイズ
フォームに関しても、様々なカスタマイズが可能です。
まず、入力フォームのサイズを変えてみましょう。 以下コードの、CSSクラス部分にハイライト表示しているクラス名を追記します。
「form-control」のみだ標準サイズ。 「form-control-sm」を追加すると高さが小さくなり、「form-control-lg」を追加すると高さが大きくなります。<
レイアウト
最初に紹介した基本的なフォームは、全ての要素が縦並びになっていました。 横並びに要素をレイアウトする方法を見てみましょう。
まず、「form」タグ下に「form-row」というCSSクラスを指定したdivを追加します。これは、グリッドシステムです。「form-row」で入力フォームやボタンまで囲っているので、これらの要素は横並びになります。 １つ１つの要素はカラムで囲っていきます。
次に、「placeholder」という属性を適用した「input」タグです。 この属性を適用し、値の部分にテキストを入れると、そのテキストが入力フォーム内に表示されます。
◆実習6.フォームを追加しよう
練習用「bootstrap-works」フォルダに新しくform.htmlを作成して、フォームを作ってみましょう。
formタグだけを書いてしまうとフォームが画面全体に伸びてしまうので、<div class="container">でフォーム全体を囲います。
完成イメージはこちらです。
フォームとしては少し変ですが、 お名前（大）は「form-control-lg」クラス、ご住所（小）は「form-control-sm」クラスを使用します。 「form-row」を使った横並び、placeholderを使ったフォーム内へのテキスト表示とこのレッスンの内容がすべて入っています。復習として作成してみて下さい。