Bootstrap Formlar

Bootstrap formlar, kullanıcıdan bilgi toplamak için kullanılan yapıların kolayca tasarlanmasını sağlar. Kullanıcı dostu ve şık bir görünüm sunan Bootstrap formlar, duyarlı yapılarıyla mobil uyumluluk sağlar. Bootstrap, formları düzenlemek ve stillendirmek için çeşitli sınıflar sunar.

Form Yapısı ve Temel Kullanım

Bootstrap form oluşturmak için form etiketi kullanılır. Form öğelerine Bootstrap sınıfları eklenerek kolayca düzenlenebilir.

Temel Örnek:

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">E-posta adresi</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">E-postanızı başkalarıyla paylaşmayız.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Şifre</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Beni Hatırla</label>
  </div>
  <button type="submit" class="btn btn-primary">Gönder</button>
</form>

Bootstrap Form Elemanları

Eleman	Sınıf	Özellik
`input`	`.form-control`	Form giriş alanlarını stillendirir.
`label`	`.form-label`	Giriş alanlarının açıklamasını ekler.
`textarea`	`.form-control`	Çok satırlı metin giriş alanı oluşturur.
`checkbox`	`.form-check-input`	Onay kutusu girişini stillendirir.
`radio`	`.form-check-input`	Radyo butonu girişlerini stillendirir.
`select`	`.form-select`	Açılır menü (dropdown) stillendirir.
`button`	`.btn`	Form butonlarını stillendirir ve renklendirir.

Örnekler

Metin ve Şifre Girişi

<form>
  <div class="mb-3">
    <label for="username" class="form-label">Kullanıcı Adı</label>
    <input type="text" class="form-control" id="username" placeholder="Kullanıcı adınızı girin">
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Şifre</label>
    <input type="password" class="form-control" id="password" placeholder="Şifrenizi girin">
  </div>
  <button type="submit" class="btn btn-success">Giriş Yap</button>
</form>

Seçim ve Onay Kutuları

<form>
  <div class="mb-3">
    <label for="city" class="form-label">Şehir</label>
    <select class="form-select" id="city">
      <option selected>Şehir Seçin</option>
      <option value="1">İstanbul</option>
      <option value="2">Ankara</option>
      <option value="3">İzmir</option>
    </select>
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="agree">
    <label class="form-check-label" for="agree">Kuralları kabul ediyorum</label>
  </div>
  <button type="submit" class="btn btn-primary">Gönder</button>
</form>

Radyo Butonları

<form>
  <div class="mb-3">
    <label class="form-label">Cinsiyet</label>
    <div class="form-check">
      <input type="radio" class="form-check-input" name="gender" id="male" value="male">
      <label class="form-check-label" for="male">Erkek</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" name="gender" id="female" value="female">
      <label class="form-check-label" for="female">Kadın</label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Kaydet</button>
</form>

Dosya Yükleme

<form>
  <div class="mb-3">
    <label for="formFile" class="form-label">Dosya Yükle</label>
    <input class="form-control" type="file" id="formFile">
  </div>
  <button type="submit" class="btn btn-secondary">Yükle</button>
</form>

Form Yerleşimi

Bootstrap, formların düzenlenmesini kolaylaştırmak için yatay, dikey ve satır içi (inline) formlar sunar.

Yatay Form

<form class="row g-3">
  <div class="col-md-6">
    <label for="firstName" class="form-label">Ad</label>
    <input type="text" class="form-control" id="firstName">
  </div>
  <div class="col-md-6">
    <label for="lastName" class="form-label">Soyad</label>
    <input type="text" class="form-control" id="lastName">
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Kaydet</button>
  </div>
</form>

Satır İçi Form

<form class="d-flex">
  <input class="form-control me-2" type="search" placeholder="Arama" aria-label="Search">
  <button class="btn btn-outline-success" type="submit">Ara</button>
</form>

EĞİTİMİ BİTİR