フローティングラベル

入力フィールドに浮かぶ美しくシンプルなフォームラベルを作成します。

このページでは

例

<input class="form-control">と<label>要素のペアをラップして.form-floating、Bootstrap のテキストフォームフィールドでフローティングラベルを有効にします。CSS のみのフローティングラベルのメソッドは疑似要素を使用するplaceholderため、それぞれにが必要です。また、兄弟セレクターを使用できるように、を最初に指定する必要があることに注意してください(例: )。<input>:placeholder-shown<input>~

電子メールアドレス

パスワード

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
  <label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Password</label>
</div>

がvalueすでに定義されている場合、<label>s は自動的に浮動位置に調整されます。

<form class="form-floating">
  <input type="email" class="form-control" id="floatingInputValue" placeholder="[email protected]" value="[email protected]">
  <label for="floatingInputValue">Input with value</label>
</form>

フォーム検証スタイルも期待どおりに機能します。

<form class="form-floating">
  <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="[email protected]" value="[email protected]">
  <label for="floatingInputInvalid">Invalid input</label>
</form>

テキストエリア

デフォルトでは、<textarea>s with.form-controlは s と同じ高さになります<input>。

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">Comments</label>
</div>

にカスタムの高さを設定するには、属性<textarea>を使用しないでください。rows代わりに、height(インラインまたはカスタム CSS を介して) 明示的に設定します。

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
  <label for="floatingTextarea2">Comments</label>
</div>

セレクト

以外では.form-control、フローティングラベルはでのみ使用できます.form-select。これらは同じように機能しますが、とは異なり<input>、常に<label>フロート状態で表示されます。との選択はサポートされていません。sizemultiple

選択で動作します

<div class="form-floating">
  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label for="floatingSelect">Works with selects</label>
</div>

レイアウト

Bootstrap グリッドシステムを使用する場合は、必ずフォーム要素を列クラス内に配置してください。