Bootstrap ile Form Oluşturma Rehberi

Bootstrap ile Form Oluşturma Rehberi

Bootstrap, web geliştirmeyi kolaylaştıran popüler bir CSS kütüphanesidir. Bootstrap kullanarak, responsive ve görsel olarak çekici formlar kolayca oluşturabilirsiniz.

Bootstrap ile Form Oluşturma Adımları:

1. Bootstrap'i Sayfanıza Ekleyin:

Bootstrap'i kullanmak için öncelikle sayfanıza Bootstrap'in CSS ve JavaScript dosyalarını eklemeniz gerekir. Bunu CDN (Content Delivery Network) aracılığıyla veya kendi bilgisayarınızdan dosyaları indirerek yapabilirsiniz.

CDN ile Bootstrap Ekleme:

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEHM0Qn32CIn3Q91cU75HjaYLRHvl/s82G/X6g4YBEk6s6fnnG3/6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856g26ODq5yTXW1KU8UZ1sc7IthfVdzNVnG+o4/FR3E75Qk0d7UH2LZY6r3" crossorigin="anonymous"></script>

Dosyaları İndirerek Ekleme:

• Bootstrap'in resmi web sitesinden (https://getbootstrap.com/) en son sürümü indirin.
• İndirdiğiniz dosyaları projenizin css ve js klasörlerine kopyalayın.
• HTML sayfanızda css klasöründeki bootstrap.min.css dosyasına ve js klasöründeki bootstrap.bundle.min.js dosyasına link verin.

2. Form Oluşturun:

Form oluşturmak için HTML'deki form etiketini kullanın. Formun action ve method özelliklerini belirlemeyi unutmayın.

Örnek:

Hazırladığınız HTML formlarınızı PestForm Endpoint'lerinize yönlendirerek tüm gönderimlerinizi kolayca yönetebilirsiniz.

HTML

<form action="{{PestForm-Endpoint}}" method="post">
...
</form>

3. Form Elemanları Ekleme:

Formunuza metin kutuları, seçimler, onay kutuları, radyo düğmeleri ve gönderme düğmeleri gibi çeşitli form elemanları ekleyebilirsiniz. Her form elemanının kendine özgü nitelikleri vardır.

Metin Kutusu:

HTML

<input type="text" name="isim" placeholder="Adınız">

Seçim Kutusu:

HTML

<select name="ulke">
  <option value="turkiye">Türkiye</option>
  <option value="abd">Amerika Birleşik Devletleri</option>
</select>

Onay Kutusu:

HTML

<input type="checkbox" name="sozlesme" checked> Sözleşmeyi kabul ediyorum

Radyo Düğmesi:

HTML

<input type="radio" name="cinsiyet" value="erkek"> Erkek
<input type="radio" name="cinsiyet" value="kadin"> Kadın

Gönderme Düğmesi:

HTML

<input type="submit" value="Gönder">

4. Formu Tasarlama:

Bootstrap'in form sınıflarını kullanarak formunuzu kolayca tasarlayabilirsiniz. Sınıflar, formunuzun rengini, boyutunu ve stilini belirlemenize yardımcı olur.

Örnek:

HTML

<form action="{{PestForm-Endpoint}}" method="post" class="container">
  <div class="row">
    <div class="col-md-6">
      <input type="text" name="isim" placeholder="Adınız" class="form-control">
    </div>
    <div class="col-md-6">
      <input type="email" name="email" placeholder="E-posta Adresiniz" class="form-control">
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-md-12">
      <input type="submit" value="Gönder" class="btn btn-primary">
    </div>
  </div>
</form>		

PestForm ile HTML form oluşturmak, internette bilgi toplamanın en kolay ve pratik yollarından biridir.

Hemen PestForm'u deneyin ve form oluşturmaya başlayın!