Bootstrap input group ve floating label kullanımı

Temel giriş grubu

En basit kullanımda bir alanın bir yanına tek bir eklenti koyarsınız; belgeler iki yana birden eklenti koymanıza da izin verir. Önemli bir kural: <label> öğesini giriş grubunun dışına, grubun üstüne yerleştirin. Etiket koymadığınız durumlarda alanın adını aria-label ile verin ve eklentiyi aria-describedby ile alana bağlayın.

<div class="input-group mb-3">
  <span class="input-group-text" id="kullaniciOnek">@</span>
  <input type="text" class="form-control" placeholder="Kullanıcı adı" aria-label="Kullanıcı adı" aria-describedby="kullaniciOnek">
</div>

<label for="profilAdresi" class="form-label">Profil adresiniz</label>
<div class="input-group mb-3">
  <span class="input-group-text" id="adresOnek">https://ornek.com/kullanici/</span>
  <input type="text" class="form-control" id="profilAdresi" aria-describedby="adresOnek">
</div>

<div class="input-group mb-3">
  <span class="input-group-text">₺</span>
  <input type="text" class="form-control" aria-label="Tutar (tam lira)">
  <span class="input-group-text">,00</span>
</div>

<div class="input-group">
  <span class="input-group-text">Not</span>
  <textarea class="form-control" aria-label="Sipariş notu"></textarea>
</div>

Bootstrap 4 kullandıysanız burada önemli bir sadeleşme var: v5'te .input-group-prepend ve .input-group-append sarmalayıcıları kaldırıldı. Butonları ve .input-group-text öğelerini doğrudan giriş grubunun çocukları olarak yazarsınız; hangi tarafta duracaklarını HTML'deki sıraları belirler. Diğer sürüm farkları Bootstrap 4'ten 5'e geçiş yazısında.

Giriş grubu nasıl çalışır: CSS kuralları

Bootstrap 5.0.2 derlenmiş CSS dosyasında giriş grubunun çekirdeği şöyle tanımlıdır:

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control,
.input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
/* (kısaltıldı) */
.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  /* (kısaltıldı) */
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

Grup bir flex kabıdır, bu yüzden çocukları tek satırda yan yana durur ve align-items: stretch sayesinde aynı yüksekliğe uzar. Alanın kendisi flex: 1 1 auto ile kalan genişliğin tamamını alır; width: 1% ve min-width: 0 ise uzun eklentiler yüzünden alanın taşmamasını sağlayan bir başlangıç değeridir. Eklenti metni white-space: nowrap aldığı için kırılmaz. Flexbox'ın kendisini merak ediyorsanız CSS flexbox rehberine bakabilirsiniz.

Köşe yuvarlaklığı da CSS ile yönetilir. Bir kural, son çocuk olmayan öğelerin sağ köşelerini düzleştirir; başka bir kural ilk çocuk olmayan öğelerin sol köşelerini düzleştirir ve kenarlıkların üst üste binmesi için onlara margin-left: -1px verir. Sonuçta grup dışarıdan tek parça bir kutu gibi görünür. Odaktaki alan z-index: 3 alır, böylece mavi halkası komşu eklentinin altında kalmaz; gruptaki butonlar da z-index: 2 ile katmanlanır.

Satır kaydırma ve boyut

Giriş grubu varsayılan olarak flex-wrap: wrap kullanır. Belgeler bunun nedenini doğrulama mesajlarına yer açmak olarak açıklar: hata metni grubun içinde alanın altına kayabilmelidir. Eklentilerin hiçbir koşulda alt satıra geçmemesini istiyorsanız gruba .flex-nowrap ekleyin.

Boyut için .input-group-sm veya .input-group-lg sınıfını grubun kendisine verirsiniz; içerideki alan, select, metin eklentisi ve butonlar otomatik olarak aynı boyuta geçer. Belgeler bunu açıkça vurgular: grubun içindeki tek tek öğelere boyut sınıfı vermek desteklenmez. Derlenmiş CSS'te .input-group-lg > .form-control, > .form-select, > .input-group-text ve > .btn kuralları padding: 0.5rem 1rem ve font-size: 1.25rem uygular; küçük boyut ise 0.25rem 0.5rem ve 0.875rem değerlerini kullanır.

<div class="input-group input-group-sm mb-3">
  <span class="input-group-text" id="kucukEtiket">Küçük</span>
  <input type="text" class="form-control" aria-label="Küçük boyut örneği" aria-describedby="kucukEtiket">
</div>
<div class="input-group input-group-lg flex-nowrap">
  <span class="input-group-text" id="buyukEtiket">Büyük</span>
  <input type="text" class="form-control" aria-label="Büyük boyut örneği" aria-describedby="buyukEtiket">
</div>

Onay kutusu, çoklu alan ve çoklu eklenti

Eklentinin içine metin yerine bir checkbox veya radio koyabilirsiniz. Belgeler, yanında görünür metin olmayan .form-check-input öğesine .mt-0 eklemenizi önerir; normalde kutuya etiket hizası için verilen üst boşluk burada gereksizdir. Bir grupta birden fazla input da kullanılabilir, örneğin ad ve soyad yan yana. Ancak belgelere göre doğrulama stilleri yalnızca tek <input> içeren gruplarda çalışır. Birden fazla eklentiyi art arda dizmek de desteklenir.

<div class="input-group mb-3">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="checkbox" value="" aria-label="Fatura adresini kullan">
  </div>
  <input type="text" class="form-control" aria-label="Fatura adresi">
</div>

<div class="input-group mb-3">
  <span class="input-group-text">Ad ve soyad</span>
  <input type="text" aria-label="Ad" class="form-control">
  <input type="text" aria-label="Soyad" class="form-control">
</div>

<div class="input-group">
  <span class="input-group-text">₺</span>
  <span class="input-group-text">0,00</span>
  <input type="text" class="form-control" aria-label="Tutar (iki ondalık basamak)">
</div>

Buton ve açılır menü eklentileri

Bir arama kutusunun yanındaki "Ara" butonu gibi kullanımlarda .btn öğesini doğrudan grubun içine koyarsınız. Belgelerdeki örnekler giriş gruplarında genellikle .btn-outline-secondary kullanır ve her butona type="button" yazar; bu, form içindeki butonların varsayılan olarak gönderme butonu olmasından kaynaklanan sürprizleri önler.

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Alan adı arayın" aria-label="Alan adı" aria-describedby="araButonu">
  <button class="btn btn-outline-secondary" type="button" id="araButonu">Ara</button>
</div>

<div class="input-group">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Uzantı</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">.com</a></li>
    <li><a class="dropdown-item" href="#">.net</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Tüm uzantılar</a></li>
  </ul>
  <input type="text" class="form-control" aria-label="Alan adı ve açılır menü">
</div>

Açılır menülü örnek, Bootstrap'in dropdown eklentisine ihtiyaç duyar. Belgelere göre açılır menüler konumlandırma için Popper kütüphanesine dayanır; bu yüzden ya Popper'ı Bootstrap'in JavaScript dosyasından önce yüklemeli ya da Popper'ı içeren bootstrap.bundle.min.js dosyasını kullanmalısınız. Menüyü grubun sağ tarafına koyduğunuzda menünün sağa hizalanması için .dropdown-menu-end ekleyin. Bir butonla bir ok düğmesini ayırmak isterseniz ok düğmesine .dropdown-toggle-split verip içine görünmez bir .visually-hidden metin koyun. Seçeneklerin tamamı dropdown yazısında, yükleme yolları CDN kurulumu yazısında.

Select ve dosya alanıyla giriş grubu

Giriş grupları özel select (.form-select) ve özel dosya alanını (.form-control ile type="file") destekler; belgelere göre tarayıcının varsayılan, sınıfsız sürümleri desteklenmez. Burada güzel bir ayrıntı var: eklenti olarak <span> yerine <label class="input-group-text"> kullanırsanız ve for ile alana bağlarsanız, eklenti hem görsel etiket hem de gerçek etiket görevi görür.

<div class="input-group mb-3">
  <label class="input-group-text" for="paketSecimi">Paket</label>
  <select class="form-select" id="paketSecimi">
    <option selected>Seçin...</option>
    <option value="1">Başlangıç</option>
    <option value="2">Profesyonel</option>
  </select>
</div>

<div class="input-group">
  <input type="file" class="form-control" id="logoDosyasi" aria-describedby="logoYukle" aria-label="Logo dosyası">
  <button class="btn btn-outline-secondary" type="button" id="logoYukle">Yükle</button>
</div>

Mini örnek: alan adı arama kutusu

Şimdi öğrendiklerimizi tek bir bileşende birleştirelim. Aşağıdaki arama kutusu büyük boyutlu bir giriş grubudur: solda sabit bir metin eklentisi, ortada alan adı için metin alanı, sağda uzantı seçimi için bir select ve en sonda arama butonu var. Görünür etiket grubun dışında, üstte duruyor; select için ayrı bir görünür etiket olmadığından onun adı aria-label ile verildi.

<label for="aranacakAlan" class="form-label">Alan adınızı arayın</label>
<div class="input-group input-group-lg mb-3">
  <span class="input-group-text" id="wwwOnek">www.</span>
  <input type="text" class="form-control" id="aranacakAlan" placeholder="firmaniz" aria-describedby="wwwOnek">
  <select class="form-select" aria-label="Uzantı seçimi">
    <option value="com" selected>.com</option>
    <option value="net">.net</option>
    <option value="org">.org</option>
  </select>
  <button class="btn btn-primary" type="submit">Sorgula</button>
</div>

Boyut sınıfı yalnızca grupta yazılı; içteki dört öğe de .input-group-lg sayesinde büyük boyuta geçer. Derlenmiş CSS büyük ve küçük gruplardaki select için ok simgesine yer açmak amacıyla sağ iç boşluğu 3rem yapar. Hem metin alanı hem select flex: 1 1 auto aldığı için ikisi kalan genişliği paylaşır; select'in daha dar kalmasını isterseniz ona kendi CSS'inizle bir genişlik verebilirsiniz. Buton grubun son çocuğu olduğu için sağ köşeleri yuvarlak kalır, aradaki tüm köşeler düzleşir ve grup tek parça görünür.

Doğrulama ile giriş grubu: has-validation

Giriş grubunun içine bir .invalid-feedback mesajı koyduğunuzda bu mesaj grubun son çocuğu olur. Yukarıda anlattığımız köşe kuralı "son çocuk olmayan öğenin sağ köşesini düzleştir" dediği için alan artık son çocuk olmadığından sağ köşesi yanlışlıkla düzleşir. v5 bu uzun süreli hatayı .has-validation sınıfıyla çözdü: bu sınıfı taşıyan grupta CSS sondan üçüncü ve öncesindeki öğelerin köşelerini düzleştirir, mesajı hesaba katmaz. Doğrulama mesajı içeren her giriş grubuna .has-validation ekleyin; ayrıntılı örnek form doğrulama yazısında.

Floating label: alanın içinde yüzen etiket

Floating label için bir .form-control input'u ile bir <label> öğesini .form-floating içine sararsınız. Belgelerin koyduğu iki katı kural vardır. Birincisi, her input'ta bir placeholder bulunmalıdır, çünkü yöntem tamamen CSS ile çalışır ve :placeholder-shown durumunu kullanır. İkincisi, input label'dan önce gelmelidir, çünkü etiketin durumu kardeş seçici ~ ile belirlenir. Placeholder metni ekranda görünmez; derlenmiş CSS onu color: transparent ile saklar.

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="girisEposta" placeholder="ad@ornek.com">
  <label for="girisEposta">E-posta adresi</label>
</div>
<div class="form-floating mb-3">
  <input type="password" class="form-control" id="girisParola" placeholder="Parola">
  <label for="girisParola">Parola</label>
</div>
<div class="form-floating">
  <input type="email" class="form-control is-invalid" id="hataliEposta" placeholder="ad@ornek.com" value="ad@ornek">
  <label for="hataliEposta">Hatalı e-posta</label>
</div>

Derlenmiş CSS'e göre .form-floating içindeki alanın yüksekliği calc(3.5rem + 2px) olur. Etiket alanın üzerine mutlak konumla yerleşir ve pointer-events: none aldığı için tıklamalar alana geçer. Alan odaklandığında ya da placeholder artık görünmüyorsa, yani alanda bir değer varsa, etiket scale(0.85) translateY(-0.5rem) translateX(0.15rem) dönüşümüyle küçülüp yukarı kayar ve opaklığı 0.65 olur; bu sırada alanın üst iç boşluğu 1.625rem olarak artar ki yazı etiketin altına girmesin. Bu yüzden value değeri önceden dolu bir alanda etiket sayfa açılır açılmaz yüzen konumdadır. CSS ayrıca tarayıcının otomatik doldurduğu alanlar için de aynı kaydırmayı tanımlar. Doğrulama stilleri de beklendiği gibi çalışır: örnekteki .is-invalid alanı kırmızı kenarlık ve uyarı simgesiyle gösterir.

Floating label ile textarea ve select

.form-floating içindeki bir textarea varsayılan olarak input'larla aynı yüksekliktedir. Belgeler daha yüksek bir alan için rows özniteliğini kullanmamanızı, bunun yerine satır içi stil veya kendi CSS'inizle açık bir height vermenizi söyler; sabit yükseklik kuralı rows etkisini geçersiz kılar. Select'lerde ise etiket her zaman yüzen konumdadır, çünkü bir select'in placeholder durumu yoktur. Belgelere göre size ve multiple öznitelikli select'ler floating label ile desteklenmez; .form-control dışında yalnızca .form-select ile çalışır.

<div class="form-floating mb-3">
  <textarea class="form-control" placeholder="Yorumunuzu yazın" id="yorumAlani" style="height: 120px"></textarea>
  <label for="yorumAlani">Yorumunuz</label>
</div>
<div class="row g-2">
  <div class="col-md">
    <div class="form-floating">
      <input type="text" class="form-control" id="sehirAlani" placeholder="Şehir" value="İzmir">
      <label for="sehirAlani">Şehir</label>
    </div>
  </div>
  <div class="col-md">
    <div class="form-floating">
      <select class="form-select" id="ilceSecimi" aria-label="İlçe seçimi">
        <option selected>Seçin</option>
        <option value="1">Konak</option>
        <option value="2">Karşıyaka</option>
      </select>
      <label for="ilceSecimi">İlçe</label>
    </div>
  </div>
</div>

İkinci örnek belgelerdeki düzen önerisini uygular: floating label'ları grid ile yan yana koyacaksanız form öğelerini sütun sınıflarının içine yerleştirin. .col-md sütunları orta ve daha geniş ekranlarda eşit genişlikte yan yana, daha dar ekranlarda alt alta durur; .g-2 ise aralarındaki boşluğu belirler. Grid ve boşluk sınıflarının ayrıntısı form layout ve gutter yazılarında.

Resmî Sign-in şablonu da floating label kullanır: e-posta ve parola alanları iki ayrı .form-floating içinde alt alta durur, altında tam genişlikte bir büyük buton vardır. Şablon iki alanın birleşik bir kutu gibi görünmesi için kendi küçük CSS dosyasıyla aradaki köşeleri düzleştirir; bu Bootstrap sınıfı değil, şablona özel bir dokunuştur. Floating label v5'te ayrı bir bileşen olarak eklendi; v4'te yalnızca bir örnek sayfaydı.

Sass değişkenleri

Sık yapılan hatalar

• Etiketi giriş grubunun içine koymak: Belgeler label'ın grubun dışında durmasını ister; içeride kalırsa flex düzeni onu bir eklenti gibi dizer.
• Öğelere tek tek boyut vermek: .form-control-lg grubun içinde desteklenmez; boyutu .input-group-lg ile gruba verin.
• v4 sarmalayıcıları: .input-group-prepend ve .input-group-append v5'te yoktur; eklentiyi doğrudan gruba yazın.
• Doğrulamada has-validation unutmak: Mesaj içeren grupta alanın köşeleri bozulur.
• Floating label'da placeholder yazmamak: :placeholder-shown çalışmadığı için etiket alanın içindeki yazının üstüne biner.
• Label'ı input'tan önce yazmak: Kardeş seçici yalnızca sonraki öğeyi seçer; sıra ters olursa etiket hiç yüzmez.
• Floating textarea'ya rows vermek: Yükseklik sabit olduğu için etkisi olmaz; height kullanın.
• Dropdown için Popper yüklememek: Açılır menülü giriş grubu yalnızca bundle dosyası ya da ayrı Popper ile açılır.

Sık Sorulan Sorular

input-group-prepend neden çalışmıyor?

Çünkü Bootstrap 5'te kaldırıldı. Eklentileri ve butonları doğrudan .input-group içine, alanın önüne ya da arkasına yazmanız yeterlidir.

Floating label neden placeholder istiyor?

Etiketin yüzüp yüzmeyeceğine CSS, alanın placeholder gösterip göstermediğine bakarak karar verir. Placeholder yoksa bu durum hiç oluşmaz. Metni görünmez olduğu için içeriği önemli değildir, ama boş bırakmayın.

Floating label select ile kullanılabilir mi?

Evet, .form-select ile çalışır ve etiket her zaman yüzen konumda durur. multiple veya size özniteliği olan select'ler desteklenmez.

Giriş grubunda iki alan doğrulanabilir mi?

Görsel olarak iki alan desteklenir ama belgelere göre doğrulama stilleri yalnızca tek input içeren gruplarda kullanılabilir. İki alanı doğrulamanız gerekiyorsa onları ayrı gruplara bölün.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · Form control · Checkbox, radio ve select · Dropdown · Form doğrulama · Form layout