【MDB】 Material Design for Bootstrap 4 ~ フローティングラベル ~

■ はじめに

https://mdbootstrap.com/components/forms/
で、左(フリー版)・右(有料版?)とサンプルが載っており、
フローティングラベル は、右側にあったので、
色々と別の方法を探ってたら、以下のフリーサンプルの「SMALL」ボタンを押したら
フローティングラベル が実装されていた。
https://mdbootstrap.com/previews/free-templates/admin/dashboard.html

■ フローティングラベル

<div class="md-form">
  <input type="text" id="form1" class="form-control">
  <label for="form1">Enter your name</label>
</div>

公式サイト

https://mdbootstrap.com/legacy/4.3.2/?page=components/forms

■ 使用上の注意

【1】type="date" etc の際に使う場合は、対象のlabelにclass="active"を付加する

<div class="md-form">
  <input type="date" id="form1" class="form-control" placeholder="yyyy-mm-ddで入力">
  <label for="form1" class="active">Enter date</label>
</div>

<div class="md-form">
  <input type="time" id="form2" class="form-control" placeholder="hh:mmで入力">
  <label for="form2" class="active">Enter time</label>
</div

■ トラブル

フローティングラベルが動かない

 * 以下の関連記事を参照のこと。
https://blogs.yahoo.co.jp/dk521123/37678439.html

関連記事

MDB

Material Design for Bootstrap 4 ~ 入門編 ~
https://blogs.yahoo.co.jp/dk521123/37632575.html
Material Design for Bootstrap 4 ~ テンプレートについて ~
https://blogs.yahoo.co.jp/dk521123/37670853.html
Material Design for Bootstrap 4 におけるトラブルシュート
https://blogs.yahoo.co.jp/dk521123/37678439.html

フローティングラベル

フローティングラベル(placeholder が動いてラベルになる)
https://blogs.yahoo.co.jp/dk521123/37672476.html
Bootstrap 4 ~ Form 編 ~
https://blogs.yahoo.co.jp/dk521123/36103698.html