Bootstrap ラベル

Bootstrap のフローティングラベル

この記事では、Bootstrap 5.3 でフローティングラベルを使用して、美しくユーザーフレンドリーなフォームを作成する方法について説明します。

フローティングラベルとは？

フローティングラベルとは、ユーザーが入力フィールドにフォーカスすると、ラベルが入力フィールドの上に移動するフォームデザインパターンです。これにより、フォームの見栄えがすっきりし、スペースを節約できます。

フローティングラベルの使い方

  1. .form-floating クラスを追加する: 入力フィールドとそのラベルを含む親要素に .form-floating クラスを追加します。
  2. ラベルを入力フィールドの後に配置する: <label> 要素を <input> 要素または <textarea> 要素の後に配置します。
  3. ラベルに for 属性を追加する: <label> 要素の for 属性が入力フィールドの id 属性と一致することを確認します。

サンプルコード


<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
  <label for="floatingInput">メールアドレス</label>
</div>

その他の注意点

  • 対応する入力タイプ: フローティングラベルは、テキストボックス、メールアドレス、パスワード、テキストエリアなど、ほとんどのフォーム入力タイプに対応しています。
  • レイアウト: .form-floating クラスは、グリッドシステムやその他のレイアウトツールを使用して配置できます。
  • スタイルのカスタマイズ: カスタム CSS を使用して、フローティングラベルの外観をさらにカスタマイズできます。
  • ブラウザの互換性: Bootstrap のフローティングラベル機能は、すべてのモダンブラウザでサポートされています。

フローティングラベルの適用例

以下は、さまざまな入力タイプにフローティングラベルを適用した例です。

入力タイプ HTML コード
テキスト 

<div class="form-floating mb-3">
  <input type="text" class="form-control" id="floatingName" placeholder="お名前">
  <label for="floatingName">お名前</label>
</div>
メールアドレス 

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingEmail" placeholder="[email protected]">
  <label for="floatingEmail">メールアドレス</label>
</div>
パスワード 

<div class="form-floating mb-3">
  <input type="password" class="form-control" id="floatingPassword" placeholder="パスワード">
  <label for="floatingPassword">パスワード</label>
</div>
テキストエリア 

<div class="form-floating">
  <textarea class="form-control" placeholder="お問い合わせ内容" id="floatingTextarea" style="height: 100px"></textarea>
  <label for="floatingTextarea">お問い合わせ内容</label>
</div>

参考資料

よくある質問

  1. Q: フローティングラベルはすべてのブラウザでサポートされていますか？
    A: はい、Bootstrap のフローティングラベル機能は、すべてのモダンブラウザでサポートされています。
  2. Q: フローティングラベルのスタイルをカスタマイズすることはできますか？
    A: はい、カスタム CSS を使用して、フローティングラベルの外観をさらにカスタマイズできます。
  3. Q: フローティングラベルはどのような入力タイプに使用できますか？
    A: フローティングラベルは、テキストボックス、メールアドレス、パスワード、テキストエリアなど、ほとんどのフォーム入力タイプに対応しています。