Bootstrap Formlar Input Group
Bootstrap, input group bileşeni ile birden fazla form elemanını (örneğin, metin kutusu ve buton) bir araya getirerek daha kullanıcı dostu formlar oluşturmanıza olanak tanır. Bu bileşen, giriş alanlarının yanında ikonlar, etiketler veya butonlar gibi ek öğeler yerleştirerek kullanıcı etkileşimini geliştirir.
1. Input Group Oluşturma
Input group, <div class="input-group"> sınıfını kullanarak oluşturulur. İşte bir input group örneği:
<div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Kullanıcı Adı" aria-label="Kullanıcı Adı"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button">Gönder</button> </div> </div> 2. Örnek Açıklaması
-
<div class="input-group">: Input group bileşenini oluşturur. -
<input>: Giriş alanını temsil eder. -
<div class="input-group-append">: Giriş alanının sonuna yerleştirilecek öğeleri belirtir (örneğin, buton). -
<button>: Giriş alanına eklenen buton.
3. İkon Ekleme
Input group’a ikon eklemek için bir span elementi ile birlikte input-group-prepend sınıfını kullanabilirsiniz. Örnek:
<div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">@</span> </div> <input type="text" class="form-control" placeholder="Kullanıcı Adı" aria-label="Kullanıcı Adı"> </div> 4. Çoklu Input Group
Birden fazla giriş alanı ve buton içeren bir input group oluşturmak da mümkündür. Örnek:
<div class="input-group mb-3"> <input type="text" class="form-control" placeholder="E-posta Adresi" aria-label="E-posta"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button">Gönder</button> </div> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Şifre" aria-label="Şifre"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button">Gönder</button> </div> </div> 5. Tam Ekran Input Group
Tam genişlikte bir input group oluşturmak için w-100 sınıfını kullanabilirsiniz:
<div class="input-group mb-3 w-100"> <input type="text" class="form-control" placeholder="Tam Genişlikte Giriş" aria-label="Tam Genişlikte Giriş"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button">Gönder</button> </div> </div> 6. Örnek Form
Aşağıda input group bileşenlerini 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 Input Group Örneği</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head> <body> <div class="container mt-5"> <h2>Input Group Örneği</h2> <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">@</span> </div> <input type="text" class="form-control" placeholder="Kullanıcı Adı" aria-label="Kullanıcı Adı"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="E-posta Adresi" aria-label="E-posta"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button">Gönder</button> </div> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Şifre" aria-label="Şifre"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button">Gönder</button> </div> </div> </form> </div> </body> </html> 7. Özet
Bootstrap ile input group bileşeni kullanarak kullanıcı dostu ve görsel olarak çekici formlar oluşturabilirsiniz. Giriş alanları, ikonlar ve butonlar gibi bileşenleri bir araya getirerek kullanıcı etkileşimini artırabilirsiniz. Daha fazla bilgi ve detaylı bileşenler 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 Input Group 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!