■ はじめに
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
関連記事
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