Bootstrap 5 Form Yüzyüzey Etiketleri

Kayan etiket/animasyon etiketi

Etiket (label) kullanılırken varsayılan olarak, genellikle girdi alanlarının üstünde görünürler:

Kayan etiket kullanarak, girdi alanlarına etiket ekleyebilir ve tıkladığınızda onları kayan/animasyon haline getirebilirsiniz:

Örnek

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="Lütfen e-posta adresinizi girin" name="email">
  <label for="email">E-posta</label>
</div>
<div class="form-floating mt-3 mb-3">
  <input type="text" class="form-control" id="pwd" placeholder="Şifre girin" name="pswd">
  <label for="pwd">Şifre</label>
</div>

Kişisel olarak deneyin

Yüzen Etiketler hakkında dikkat edilmesi gerekenler：

<label>Elementin <input>Elementi'nin ardından olması ve her <input>Elementi'nin olmalıdır placeholder Özellikler (görünmese bile)。

Metin Alanı

Metin alanları için de geçerlidir：

Örnek

<div class="form-floating">
  <textarea class="form-control" id="comment" name="text" placeholder="Yorum buraya gider"></textarea>
  <label for="comment">Yorum</label>
</div>

Kişisel olarak deneyin

Seçim Menüsü

Ayrıca, seçim menüsünde "Yüzen Etiket" kullanabilirsiniz. Ancak, bu etiketler yüzer/animasyonlu olmaz. Etiket, her zaman sol üst köşedeki seçim menüsü içinde görünecektir：

Örnek

<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">Seçim Listesi (Bir Seçim Yapın)：</label>
</div>

Kişisel olarak deneyin