Bootstrap 5 フォームフロートラベル

フローティングラベル/アニメーションラベル

デフォルトでは、ラベル（label）を使用する場合、通常は入力フィールドの上部に表示されます：

フローティングラベルを使用することで、入力フィールド内にラベルを挿入し、入力フィールドをクリックした際に浮遊/アニメーション化することができます：

例

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="請输入电邮地址" name="email">
  <label for="email">電子メール</label>
</div>
<div class="form-floating mt-3 mb-3">
  <input type="text" class="form-control" id="pwd" placeholder="パスワードを入力してください" name="pswd">
  <label for="pwd">パスワード</label>
</div>

実際に試してみてください

浮動タイトルについての注意点：

<label>要素は<input>要素の後に配置されなければなりません、そして各<input>要素には placeholder 属性（表示されていない場合でも）。

テキストエリア

テキストフィールドにも適用されます：

例

<div class="form-floating">
  <textarea class="form-control" id="comment" name="text" placeholder="ここにコメントを入力してください"></textarea>
  <label for="comment">コメント</label>
</div>

実際に試してみてください

選択メニュー

選択メニューで「浮動タイトル」を使用することもできますが、それらは浮動/アニメーション化されません。タイトルは常に左上隅の選択メニュー内に表示されます：

例

<div class="form-floating">
  <select class="form-select" id="sel1" name="sellist">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
  <label for="sel1" class="form-label">選択リスト（一つを選んでください）：</label>
</div>

実際に試してみてください