Material Design for Bootstrap3（その8）フォームの実装

Bootstrapを使い慣れてる人ならば、マテリアルデザインを簡単に導入することが出来る「Material Design for Bootstrap」。

そのBootstrap3対応バージョン、「Material Design for Bootstrap3（以下、MDB3と表記）」のご紹介8回目です。

最終回の今回はフォームの実装について。

＊Material Design for Bootstrap3
＊Forms – Material Design for Bootstrap

～目次～

基本的なフォームの実装
フォームの色を変更
記入欄に例文を表示する
項目名にアイコンを付ける
もっとMDB3について知りたい人は

基本的なフォームの実装

まずは、本家BootstrapとMDB3のフォームの違いを見てみましょう。

＊Bootstrap：フォームの実装

＊MDB3：フォームの実装（基本形）

両者の違いは幾つかありますが、目に付くのが

記入欄の形状：MDB3はアンダーラインのみ
記入時の挙動：MDB3は項目名が上にぬるっと動く
記入時の正誤判定色：MDB3は正しい記入が行われたときはアンダーラインがグリーン、間違った記入の時はレッドに変わる
送信ボタンがマテリアルカラーでシャドウ付き

こんなとこでしょうか。

やっぱりMDB3のほうが格好良いですね。

以下、MDB3のフォームのコード例です

<div class="row">
    <form class="col-md-12">
      <div class="row">
        <div class="input-field col-md-6">
          <input id="first_name" type="text" class="validate">
          <label for="first_name">名字</label>
        </div>
        <div class="input-field col-md-6">
          <input id="last_name" type="text" class="validate">
          <label for="last_name">名前</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col-md-12">
          <input id="email" type="email" class="validate">
          <label for="email">メールアドレス</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col-md-12">
          <textarea id="textarea1" class="materialize-textarea"></textarea>
          <label for="textarea1">お問い合わせ内容</label>
        </div>
      </div>
      <button type="button" class="btn btn-primary">送信</button>
    </form>
</div>

フォームの色を変更

MDB３のフォームはデフォルトの場合、項目記入時にアンダーラインや項目名などの色がブルーに変わります。

この色を変えたい場合は、ちょいと面倒ですがCSSに以下のコードを追加します。

/* 項目名カラー */
.input-field label {
 color: #000;
   }
/* 項目名 focus時のカラー */
.input-field input.validate:focus + label,
.input-field textarea.materialize-textarea:focus + label {
 color: #000;
   }
/* 記入欄アンダーライン focus時のカラー  */
.input-field input.validate:focus,
.input-field textarea.materialize-textarea:focus {
 border-bottom: 1px solid #000;
 box-shadow: 0 1px 0 0 #000;
   }

任意の色を記述してください。

「送信」ボタンの色の変更方法は過去記事をご参照ください。

実際の変化はデモページをご参照ください。

＊MDB3：フォームの実装（色を変更）

記入欄に例文を表示する

記入欄に例文を表示したいときは、input要素に「value属性」を追加します。

以下、コード記述例

<div class="row">
    <div class="input-field col-md-12">
      <input value="福岡県福岡市博多区東公園7－7" id="address" type="text" class="validate">
      <label for="address">住所</label>
    </div>
</div>

実際の表示はデモページをご参照ください。

＊MDB3：フォームの実装（例文を表示する）

項目名にアイコンを付ける

項目名の前にアイコンを表示したい場合は「Google Material icons」を使います。

MDB３では「Google Material icons」は実装済なので、HTMLにコードを記述するだけで簡単に使えます。

以下、コード記述例

<div class="row">   
    <div class="input-field col-md-6">
      <i class="material-icons prefix">account_circle</i>
      <input id="icon_prefix" type="text" class="validate">
      <label for="icon_prefix">名前</label>
    </div>
    <div class="input-field col-md-6">
      <i class="material-icons prefix">phone</i>
      <input id="icon_telephone" type="tel" class="validate">
      <label for="icon_telephone">電話番号</label>
    </div>
</div>