Bootstrap Formlar (Forms)

Web tasarımı öğrenme serüvenimizde, ziyaretçilerinizin web sitenizle doğrudan veri alışverişi yaptığı, kullanıcı deneyiminin (UX) en kritik parçalarından biri olan Bootstrap Formlar (Forms) konusuna geldik. İster bir iletişim formu, ister kullanıcı giriş ekranı, isterse de bir e-ticaret ödeme sayfası tasarlıyor olun; arama motoru optimizasyonu (SEO) ve mobil uyumluluk standartlarına uygun bir form yapısı kurmak profesyonel bir sitenin olmazsa olmazıdır.

Standart HTML form elemanları, farklı tarayıcılarda (Chrome, Safari, Edge) ve işletim sistemlerinde birbirinden tamamen farklı ve genellikle modası geçmiş bir görünüme sahiptir. Bootstrap 5, karmaşık CSS kodları yazmanıza gerek kalmadan bu form elemanlarını standardize eder, onlara modern bir estetik katar ve her cihazda kusursuz çalışmasını sağlar.

Bu rehberde, Bootstrap 5 ile form oluşturmanın temellerini, yepyeni “Kayan Etiketler (Floating Labels)” özelliğini ve eski sürümlerden (v4) geçiş yapanlar için nelerin değiştiğini örneklerle sıfırdan öğreneceğiz.

1. Temel Form Yapısı ve Form Kontrolleri (Form Controls)

Bootstrap’te metin kutuları (text input), e-posta alanları, şifre alanları ve geniş metin kutuları (textarea) oluşturmak için .form-control sınıfı kullanılır. Bu sihirli sınıf, form elemanının genişliğini otomatik olarak %100 yapar, köşelerini hafifçe yuvarlatır, modern bir iç boşluk (padding) ekler ve tıklandığında (focus) şık bir mavi parlama efekti verir.

Ayrıca Bootstrap 5 ile birlikte form etiketleri (label) için .form-label sınıfının kullanılması zorunlu hale getirilmiştir.

Örnek Temel İletişim Formu:

<form>
  <!-- mb-3 (margin-bottom: 3) sınıfı ile elemanlar arasına dikey boşluk bırakıyoruz -->
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">E-posta Adresi</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="E-postanızı giriniz">
    <!-- form-text sınıfı, alanın altındaki küçük açıklama metinleri içindir -->
    <div class="form-text">E-posta adresiniz asla üçüncü şahıslarla paylaşılmayacaktır.</div>
  </div>

  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Şifre</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Şifrenizi giriniz">
  </div>

  <div class="mb-3">
    <label for="exampleTextarea" class="form-label">Mesajınız</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
  </div>

  <button type="submit" class="btn btn-primary">Gönder</button>
</form>

(Not: Önceki sürüm olan Bootstrap 4’te form elemanlarını gruplamak için .form-group sınıfı kullanılıyordu. Bootstrap 5’te bu sınıf tamamen kaldırılmış olup, yerine yukarıdaki örnekte görüldüğü gibi standart boşluk bırakma araçları olan .mb-3 gibi (margin) sınıfları getirilmiştir.)

2. Onay Kutuları (Checkboxes) ve Radyo Düğmeleri (Radios)

Bootstrap 5, onay kutuları ve radyo düğmeleri mimarisinde köklü bir yeniliğe gitmiştir. Artık tüm form elemanları yerel (native) ve özel (custom) ayrımları olmaksızın tek bir yapıda birleştirilmiştir.

Eskiden kullanılan .custom-check sınıfı tamamen kaldırılarak yerine .form-check kapsayıcı sınıfı gelmiştir. Bu yeni yapı, tüm tarayıcılarda (cross-browser) tamamen aynı görünen özel SVG ikonlarına sahiptir.

İçerisindeki input (girdi) elemanına .form-check-input, yanındaki metne ise .form-check-label sınıfı verilir.

Örnek Onay Kutusu ve Radyo Düğmesi:

<!-- Onay Kutusu (Checkbox) -->
<div class="form-check mb-3">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Kullanım koşullarını okudum ve kabul ediyorum.
  </label>
</div>

<!-- Radyo Düğmeleri (Radio) -->
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" checked>
  <label class="form-check-label" for="flexRadioDefault1">
    Bireysel Üyelik
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2">
  <label class="form-check-label" for="flexRadioDefault2">
    Kurumsal Üyelik
  </label>
</div>

3. Switch (Aç/Kapat) Düğmeleri

Özellikle ayarlar panellerinde sıklıkla kullanılan “Switch” tarzı kaydırmalı butonlar da Bootstrap 5 ile çok daha basitleştirilmiştir. Klasik bir .form-check yapısının yanına sadece .form-switch sınıfını eklemeniz yeterlidir.

<div class="form-check form-switch mb-3">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Karanlık Modu (Dark Mode) Aktifleştir</label>
</div>

4. Seçim Menüleri (Select Menus)

Kullanıcının açılır bir menüden belirli bir seçeneği seçmesini sağlayan <select> etiketleri de yeni bir sınıfa kavuşmuştur. Eski .custom-select sınıfı terk edilerek .form-select sınıfı kullanıma sunulmuştur. Bu menülerin sağ tarafında, Bootstrap tarafından özel olarak tasarlanmış estetik bir aşağı ok simgesi (SVG) yer alır.

<select class="form-select" aria-label="Default select example">
  <option selected>Lütfen bir şehir seçiniz</option>
  <option value="1">İstanbul</option>
  <option value="2">Ankara</option>
  <option value="3">İzmir</option>
</select>

5. Yeni ve Şık: Kayan Etiketler (Floating Labels)

Bootstrap 5’in form tasarımına getirdiği belki de en modern, en göz alıcı yenilik Floating Labels (Kayan Etiketler) özelliğidir.

Bu tasarım modelinde, “E-posta” veya “Şifre” yazan etiket metni (label), input alanının içinde durur. Kullanıcı bu alana tıkladığında (focus) veya bir metin girmeye başladığında, etiket küçülerek animasyonlu ve pürüzsüz bir şekilde alanın sol üst köşesine kayar. Bu tamamen CSS ile yapılmış, JavaScript gerektirmeyen harika bir özelliktir.

Kullanmak için alanı .form-floating sınıfına sahip bir <div > içine almanız ve <input> etiketini önce, <label> etiketini ise sonra yazmanız gerekir.

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
  <label for="floatingInput">E-posta Adresi</label>
</div>

<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Şifre">
  <label for="floatingPassword">Şifre</label>
</div>

6. Girdi Grupları (Input Groups)

Bir e-posta giriş alanının başına “@” işareti veya bir fiyat alanının başına “₺” para birimi sembolü eklemek istediğinizde Girdi Grupları (Input Groups) kullanılır.

Bootstrap 5 bu konuda da kod kalabalığını temizlemiştir. Bootstrap 4’te zorunlu olan .input-group-prepend ve .input-group-append (başına ve sonuna ekle) sınıfları kaldırılmıştır. Artık eklenecek sembol veya butona doğrudan .input-group-text sınıfını verip, girdi (input) alanının hemen yanına yazmanız yeterlidir.

<div class="input-group mb-3">
  <!-- Form alanının başında sabit duran metin -->
  <span class="input-group-text" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Kullanıcı Adı" aria-label="Username">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Bağış Tutarı">
  <!-- Form alanının sonunda sabit duran metin -->
  <span class="input-group-text">.00 ₺</span>
</div>

7. Form Doğrulama (Validation)

Ziyaretçiler formu eksik doldurduğunda veya e-posta formatını yanlış yazdığında onlara yeşil (başarılı) veya kırmızı (hatalı) renklerle görsel geri bildirim sunmanız gerekir. Bootstrap, HTML5’in standart form doğrulama özelliklerini destekler. Ayrıca, doğrulama geri bildirimlerini .has-validation sınıfıyla kullanarak, form gruplarında yaşanan kenar kıvrımı (border-radius) hatalarını Bootstrap 5 ile mükemmel biçimde çözer.

Özet: Bootstrap 5 ile Formlarda Neler Değişti?

Eğer Bootstrap’in önceki sürümlerine aşinaysanız, hızlıca şu köklü değişiklikleri özetleyebiliriz:

1. .form-group ve .form-inline Yok: Artık formlarda özel hizalama sınıfları kullanmak yerine Grid (ızgara) ve Utility (margin, padding) boşluk sınıflarını kullanıyoruz.
2. Özel Sınıflara Veda: .custom-check, .custom-select, .custom-range gibi sınıflar iptal edildi ve yerlerini daha basit olan .form-check, .form-select, .form-range standart sınıflarına bıraktı.
3. Sass ve CSS Değişkenleri: Form kontrolleri, karanlık moda (dark mode) ve özel renklendirmelere anında uyum sağlaması için artık derinlemesine CSS değişkenleri (CSS variables) ile inşa edilmektedir.
4. jQuery’e İhtiyaç Yok: Tıpkı diğer bileşenlerde olduğu gibi, formlardaki doğrulama (validation) veya etkileşimli alanlar (varsa) için ağır jQuery kütüphanesine bağımlılık tamamen bitirilmiştir.

Sonuç olarak; Bootstrap 5 form bileşenleri, en karmaşık kayıt ve e-ticaret ödeme (checkout) sayfalarını bile her ekrana uygun, modern, estetik (Kayan Etiketler gibi) ve SEO dostu hale getirmenize imkan tanır. Verilen bu örnekleri kendi HTML sayfanıza kopyalayarak test edebilir ve Bootstrap serüveninizde sağlam bir adım daha atabilirsiniz!