Bootstrap Formlar Floating Labels
Bootstrap, formlarda kullanıcı deneyimini artırmak için floating labels (yüzen etiketler) özelliğini sunar. Bu özellik, etiketlerin giriş alanlarının üzerine taşınmasını sağlar; bu da daha temiz bir tasarım ve daha iyi kullanıcı etkileşimi anlamına gelir. Yüzen etiketler, kullanıcı giriş alanına odaklandığında etiketlerin yukarı kayması ile görünür hale gelir.
1. Floating Labels Kullanımı
Bootstrap 5 ile yüzen etiketleri kullanmak oldukça kolaydır. İşte bir örnek:
<div class="form-floating mb-3"> <input type="text" class="form-control" id="floatingInput" placeholder="Kullanıcı Adı"> <label for="floatingInput">Kullanıcı Adı</label> </div> 2. Örnek Açıklaması
-
<div class="form-floating">: Yüzen etiket bileşenini oluşturur. Bu div, form kontrol elemanını ve etiketini kapsar. -
<input>: Giriş alanını temsil eder.placeholderözelliği, yüzen etiketin başlangıçta görünebilmesi için gereklidir. -
<label>: Yüzen etiket.forözelliği, etiketin hangi giriş alanına ait olduğunu belirtir.
3. Farklı Giriş Türleri
Yüzen etiketleri farklı türlerdeki giriş alanlarıyla kullanabilirsiniz. İşte bir örnek:
<div class="form-floating mb-3"> <input type="email" class="form-control" id="floatingEmail" placeholder="E-posta Adresi"> <label for="floatingEmail">E-posta Adresi</label> </div> <div class="form-floating mb-3"> <input type="password" class="form-control" id="floatingPassword" placeholder="Şifre"> <label for="floatingPassword">Şifre</label> </div> 4. Tam Ekran Kullanımı
Yüzen etiketleri tam genişlikte bir form kontrolü için de kullanabilirsiniz:
<div class="form-floating mb-3"> <input type="text" class="form-control w-100" id="floatingFullWidth" placeholder="Tam Genişlikte Giriş"> <label for="floatingFullWidth">Tam Genişlikte Giriş</label> </div> 5. Örnek Form
Aşağıda yüzen etiketleri içeren örnek bir form bulunmaktadır:
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Floating Labels Örneği</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/css/bootstrap.min.css"> </head> <body> <div class="container mt-5"> <h2>Yüzen Etiket Örneği</h2> <form> <div class="form-floating mb-3"> <input type="text" class="form-control" id="floatingInput" placeholder="Kullanıcı Adı"> <label for="floatingInput">Kullanıcı Adı</label> </div> <div class="form-floating mb-3"> <input type="email" class="form-control" id="floatingEmail" placeholder="E-posta Adresi"> <label for="floatingEmail">E-posta Adresi</label> </div> <div class="form-floating mb-3"> <input type="password" class="form-control" id="floatingPassword" placeholder="Şifre"> <label for="floatingPassword">Şifre</label> </div> <button type="submit" class="btn btn-primary">Gönder</button> </form> </div> </body> </html> 6. Özet
Bootstrap ile yüzen etiketler kullanarak formlarınızı daha estetik ve kullanıcı dostu hale getirebilirsiniz. Bu özellik, kullanıcıların form alanlarına odaklandığında etiketlerin görünümünü artırır ve daha temiz bir arayüz sunar. Daha fazla bilgi ve detaylar için Bootstrap Belgeleri sayfasını ziyaret edebilirsiniz.
Bu ders size yardımcı oldu mu? Puan verin!
Geri bildiriminiz içeriğimizi sürekli güncel ve kaliteli tutmamızı sağlar.
Sıkça Sorulan Sorular (SSS)
Bu ders ve konuyla ilgili en çok merak edilenler
Bootstrap Formlar Floating Labels dersini öğrenmek için ön koşul var mı?
Bu eğitim temel seviyeden ileri seviyeye adım adım hazırlanmıştır. Kodları kopyalayıp Canlı Editör üzerinde test ederek kolayca pratik yapabilirsiniz.
Örnek kodları kendi projelerimde ücretsiz kullanabilir miyim?
Evet, PHP Hocası üzerindeki tüm kod örnekleri açık kaynak mantığıyla sunulmaktadır. Ticari veya kişisel projelerinizde serbestçe kullanabilirsiniz.
Takıldığım bir yerde nereden soru sorabilirim?
Dersin altındaki topluluk yorumları bölümünden sorunuzu sorabilirsiniz. Eğitmenlerimiz ve topluluk üyelerimiz kısa sürede yanıt verecektir.
Topluluk Yorumları (0)
Ders Hakkında Yorum Yap veya Soru Sor
Henüz yorum yapılmamış. İlk yorumu siz yazın!