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

現行最新版（Bootstrap 5）講座をリリースしました

→Bootstrap 5講座のご受講はこちら

吉田先生

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

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