Hazırlayan : Yusuf Gürkan
Bootstrap Formlar
Form denetimleri, Bootstrap ile otomatik olarak bazı genel stiller alır:
Tüm textual <input>, <textarea>, ve <select> class öğelerinin .form-control genişliği %100'dür.
Önyükleme üç tür form düzeni sağlar:
Dikey biçim (bu varsayılandır)
yatay biçim
Satır içi form
Her üç form düzeni için standart kurallar:
Etiketleri ve form kontrollerini sarın <div class="form-group"> (optimum boşluk için gereklidir)
.form-control Tüm metinsel <input>, <textarea> ve <select> öğelere sınıf ekleyin
Aşağıdaki örnek, iki giriş alanı, bir onay kutusu ve bir gönder düğmesi olan dikey bir form oluşturur:
ÖRNEK:
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Satır içi formda, tüm öğeler satır içi, sola hizalıdır ve etiketler yan yanadır.
Not: Bu, yalnızca en az 768 piksel genişliğindeki görünüm pencerelerindeki formlar için geçerlidir!
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">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
İpucu: Her giriş için bir etiket eklemezseniz, ekran okuyucular formlarınızla sorun yaşar. Sınıfı kullanarak, ekran okuyucular hariç tüm aygıtların etiketlerini gizleyebilirsiniz .sr-only:
ÖRNEK:
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label class="sr-only" for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label class="sr-only" for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Yatay form, etiketlerin büyük ve orta boy ekranlarda giriş alanının (yatay) yanında hizalandığı anlamına gelir. Küçük ekranlarda (767 piksel ve altı), dikey bir forma dönüşür (her girişin üstüne etiketler yerleştirilir).
Yatay form için ek kurallar:
.form-horizontal Öğeye sınıf <form> ekle
.control-label Tüm <label> öğelere sınıf ekle
İpucu: Form denetimlerinin etiketlerini ve gruplarını yatay bir düzende hizalamak için Bootstrap'in önceden tanımlanmış ızgara sınıflarını kullanın.
Aşağıdaki örnek, iki giriş alanı, bir onay kutusu ve bir gönder düğmesi olan yatay bir form oluşturur.
ÖRNEK:
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>