Bootstrap 5 Form

Yığınlı Formlar

Tüm .form-control sınıfı olan <input> ve <textarea> öğeleri doğru form stillerine sahip olacaktır:

Örnek

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">E-posta:</label>
    <input type="email" class="form-control" id="email" placeholder="Lütfen e-posta adresinizi girin" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Şifre:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Şifre girin" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> Beni hatırla
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Gönder</button>
</form>

Kişisel Deneyimleyin

Ayrıca dikkat edin, her label elemanına .form-label sınıfı ayarlandı, doğru doldurma sağlamak için.

çerezlerin farklı işaretleri vardır. Onlar .form-check sınıfının konteyner elemanlarını sarmalayın。label ayarı .form-check-label sınıfı,而复选框和单选按钮使用 .form-check-input。

Textarea

Örnek

<label for="comment">Yorum:</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

Kişisel Deneyimleyin

Form satırı / ızgara (satırdaki form)

Eğer form elemanlarının yan yana görüntülenmesini istiyorsanız, aşağıdaki sınıfları kullanın .row ve .col：

Örnek

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="E-posta adresinizi girin" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Şifre girin" name="pswd">
    </div>
  </div>
</form>

Kişisel Deneyimleyin

Sizin Bootstrap Ağ Bölümlerinde sütunlar ve satırlar hakkında daha fazla bilgi öğrendiniz.

Form Denetimi Boyutları

Form denetimi boyutlarını kullanabilirsiniz .form-control-lg veya .form-control-sm Değiştir .form-control Girdi denetimi boyutu:

Örnek

<input type="text" class="form-control form-control-lg" placeholder="Büyük Girdi Denetimi">
<input type="text" class="form-control" placeholder="Normal Girdi Denetimi">
<input type="text" class="form-control form-control-sm" placeholder="Küçük Girdi Denetimi">

Kişisel Deneyimleyin

Devre Dışı Bırakılmış ve Yalnızca Okunabilir

Girdi alanlarını devre dışı bırakmak için disabled ve/veya readonly özelliklerini kullanın:

Örnek

<input type="text" class="form-control" placeholder="Normal Girdi Denetimi">
<input type="text" class="form-control" placeholder="Devre Dışı Bırakılmış Girdi Denetimi" disabled>
<input type="text" class="form-control" placeholder="Yalnızca Okunabilir Girdi Denetimi" readonly>

Kişisel Deneyimleyin

Temiz Metin Girdisi

Kullanın .form-control-plaintext Kenarlıksız girdi alanı tarzını ayarlamak için sınıf kullanın, ancak uygun dış kenarlık ve iç kenarlık tutun:

Örnek

<input type="text" class="form-control-plaintext" placeholder="Temiz Metin Girdisi">
<input type="text" class="form-control" placeholder="Normal Girdi Denetimi">

Kişisel Deneyimleyin

Renk Seçicisi

type="color" girdi tarzını doğru şekilde ayarlamak için .form-control-color Sınıfı:

Örnek

<input type="color" class="form-control form-control-color" value="#CCCCCC">

Kişisel Deneyimleyin