Label Pergelangan Form Bootstrap 5

Tanda floating/animasi tanda

Secara default, saat menggunakan tanda (label), mereka biasanya muncul di atas bidang input:

Dengan menggunakan tanda floating, Anda dapat menempatkan tanda di dalam bidang input dan membuang/membuat animasi saat mengklik bidang input:

Example

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="Silakan masukkan alamat email" name="email">
  <label for="email">Email</label>
</div>
<div class="form-floating mt-3 mb-3">
  <input type="text" class="form-control" id="pwd" placeholder="Please enter password" name="pswd">
  <label for="pwd">Password</label>
</div>

Try It Yourself

Notes on Floating Labels:

The <label> element must be after the <input> element, and each <input> element needs placeholder Properties (even if not displayed).

Textarea

Also applies to text fields:

Example

<div class="form-floating">
  <textarea class="form-control" id="comment" name="text" placeholder="Comment goes here"></textarea>
  <label for="comment">Comment</label>
</div>

Try It Yourself

Selection Menu

You can also use 'Floating Labels' on the selection menu. However, they will not float/animate. The label will always appear in the upper left corner of the selection menu:

Example

<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">Select List (Select One):</label>
</div>

Try It Yourself