Önyükleme 4 Formları
Bootstrap 4'ün Varsayılan Ayarları
Form denetimleri, Bootstrap ile otomatik olarak bazı genel stiller alır:
Tüm metinsel <input>, <textarea>ve
<select>sınıflı öğelerin .form-controlgenişliği %100'dür.
Bootstrap 4 Form Düzenleri
Bootstrap iki tür form düzeni sağlar:
- Yığılmış (tam genişlikte) form
- satır içi formu
Bootstrap 4 Yığılmış Form
Aşağıdaki örnek, iki giriş alanı, bir onay kutusu ve bir gönder düğmesi içeren bir yığılmış form oluşturur.
.form-groupUygun kenar boşluklarını sağlamak için her form denetiminin etrafına bir sarmalayıcı öğe ekleyin :
Örnek
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control"
placeholder="Enter email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
placeholder="Enter password" id="pwd">
</div>
<div class="form-group form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Önyükleme Satır İçi Formu
Satır içi biçimde, tüm öğeler satır içi ve sola hizalıdır.
Not: Bu, yalnızca en az 576 piksel genişliğindeki görünüm alanlarındaki formlar için geçerlidir. 576 pikselden daha küçük ekranlarda yatay olarak istiflenir.
Satır içi form için ek kural:
.form-inlineÖğeye sınıf<form>ekle
Aşağıdaki örnek, iki giriş alanı, bir onay kutusu ve bir gönder düğmesi olan bir satır içi form oluşturur:
Örnek
<form class="form-inline" action="/action_page.php">
<label for="email">Email address:</label>
<input type="email" class="form-control"
placeholder="Enter email" id="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
placeholder="Enter password" id="pwd">
<div class="form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Yardımcı Programlarla Satır İçi Form
Yukarıdaki satır içi form "sıkıştırılmış" hissediyor ve Bootstrap'in boşluk bırakma yardımcı programlarıyla çok daha iyi görünecek. Aşağıdaki örnek .mr-sm-2, tüm aygıtlardaki (küçük ve yukarı) her girişe bir sağ kenar boşluğu ( ) ekler. .mb-2Ve giriş alanını kırıldığında biçimlendirmek için bir kenar boşluğu alt sınıfı ( ) kullanılır (yeterli boşluk/genişlik nedeniyle yataydan dikeye geçer):
Örnek
<form class="form-inline" action="/action_page.php">
<label for="email"
class="mr-sm-2">Email address:</label>
<input type="email" class="form-control
mb-2 mr-sm-2" placeholder="Enter email" id="email">
<label for="pwd"
class="mr-sm-2">Password:</label>
<input type="password" class="form-control
mb-2 mr-sm-2" placeholder="Enter password" id="pwd">
<div class="form-check mb-2 mr-sm-2">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary
mb-2">Submit</button>
</form>
Bootstrap 4 Utilities Bölümümüzde boşluk bırakma ve diğer "yardımcı" sınıflar hakkında daha fazla bilgi edineceksiniz .
Form Satırı/Izgara
.colBoşluk yardımcı programları kullanmadan form girdilerinin genişliğini ve hizalamasını denetlemek için sütunları ( ) da kullanabilirsiniz . .rowSadece onları bir kabın içine koymayı unutmayın .
Aşağıdaki örnekte, yan yana görünecek iki sütun kullanıyoruz. Önyükleme Izgaraları Bölümünde sütunlar ve satırlar hakkında çok daha fazlasını öğreneceksiniz .
Örnek
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div
class="col">
<input type="password"
class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
Daha az ızgara marjı istiyorsanız (varsayılan sütun olukları geçersiz kılın), .form-rowbunun yerine şunu kullanın .row:
Örnek
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div
class="col">
<input type="password"
class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
Form Doğrulama
Kullanıcılara değerli geri bildirim sağlamak için farklı doğrulama sınıflarını kullanabilirsiniz. Formu göndermeden önce veya sonra doğrulama geri bildirimi sağlamak isteyip istemediğinize bağlı olarak öğeye .was-validatedveya .needs-validationöğeye ekleyin . <form>Giriş alanlarında, formda neyin eksik olduğunu belirtmek için yeşil (geçerli) veya kırmızı (geçersiz) bir kenarlık olacaktır. Ayrıca , formu göndermeden önce kullanıcıya neyin eksik olduğunu veya yapılması gerektiğini açıkça söylemek için bir .valid-feedbackveya mesajı da ekleyebilirsiniz
..invalid-feedback
Örnek
Bu örnekte, .was-validatedformu göndermeden önce neyin eksik olduğunu belirtmek için kullanıyoruz:
<form action="/action_page.php" class="was-validated">
<div class="form-group">
<label
for="uname">Username:</label>
<input type="text"
class="form-control" id="uname" placeholder="Enter username" name="uname"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd" placeholder="Enter password" name="pswd"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input
class="form-check-input" type="checkbox" name="remember" required> I agree on
blabla.
<div
class="valid-feedback">Valid.</div>
<div
class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn
btn-primary">Submit</button>
</form>
Örnek
Bu örnekte, .needs-validationform gönderildikten SONRA doğrulama efekti ekleyecek olan öğesini kullanıyoruz (eksik bir şey varsa). Bu örneğin düzgün çalışması için ayrıca bazı jQuery kodları eklemeniz gerekeceğini unutmayın:
<form action="/action_page.php" class="needs-validation"
novalidate>
<div class="form-group">
<label
for="uname">Username:</label>
<input type="text"
class="form-control" id="uname" placeholder="Enter username" name="uname"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd" placeholder="Enter password" name="pswd"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input
class="form-check-input" type="checkbox" name="remember" required> I agree on
blabla.
<div
class="valid-feedback">Valid.</div>
<div
class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn
btn-primary">Submit</button>
</form>
<script>
//
Disable form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Get the
forms we want to add validation styles to
var forms =
document.getElementsByClassName('needs-validation');
//
Loop over them and prevent submission
var validation =
Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
},
false);
});
}, false);
})();
</script>