Bootstrapのフォームを理解する【図解たっぷりBootstrap入門】

• form
• フォームのカスタマイズ
• ◆実習:フォームを追加しよう

 

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」で入力フォームやボタンまで囲っているので、これらの要素は横並びになります。 １つ１つの要素はカラムで囲っていきます。

次に、「input」タグに「placeholder」という属性を適用してフォームを作ります。 この属性を適用し、値の部分にテキストを入れると、そのテキストが入力フォーム内に表示されます。

◆実習:フォームを追加しよう

「bootstrap-works」フォルダ内に新しくform.htmlを作成し、フォームを作ってみましょう。

formタグだけを書いてしまうとフォームが画面全体に伸びてしまうので、 <div class="container">でフォーム全体を囲います。

完成イメージはこちらです。

お名前（大）は「form-control-lg」クラス、 ご住所（小）は「form-control-sm」クラスを使用します。

フォームとしては少し変ですが、「form-row」を使った横並び、placeholderを使ったフォーム内へのテキスト表示とこのレッスンの内容がすべて入っています。復習として作成してみて下さい。