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

基本的なフォームの実装

まずは、本家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>

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

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

「Google Material icons」に関しては、下記ブログが詳しいです。
ご参照ください。

＊マテリアルデザイン向けに作成されたGoogleアイコンフォント「Material icons」の使い方

もっとMDB3について知りたい人は

さて、MDB3の解説、今回が最終回となります。

まだまだ使える機能は多いので、興味のある方は公式ページをご覧ください。

＊Material Design for Bootstrap3

ただ、英語なので解読に苦労しますけどね。
それと公式ページのくせに誤記が多いのが難点です (^_^;)

解説記事にはGoogle翻訳が大活躍しました

関連記事Material Design for Bootstrap3（その8）フォームの実装

2017.05.29

関連記事Material Design for Bootstrap3（その7）各種エフェクトの実装

2017.05.29

関連記事Material Design for Bootstrap3（その6）スライドショーの実装

2017.05.29

関連記事Material Design for Bootstrap3（その5）パララックスの実装

2017.05.29

関連記事Material Design for Bootstrap3（その4）アニメーションの実装

2017.05.29

関連記事Material Design for Bootstrap3（その3）ボタンの実装

2024.01.03

関連記事Material Design for Bootstrap3（その2）シャドウとホバーエフェクトの実装

2017.05.29

関連記事Material Design for Bootstrap3（その1）導入とカードデザインの実装

2017.05.29

関連記事マテリアルデザインを簡単に実装「Material Design for Bootstrap」

2018.12.11