Bootstrap Form Girişleri
Desteklenen Form Kontrolleri
Bootstrap aşağıdaki form denetimlerini destekler:
- giriş
- metin alanı
- onay kutusu
- radyo
- Seçme
Önyükleme Girişi
Bootstrap, tüm HTML5 giriş türlerini destekler: metin, parola, tarih saat, yerel tarih, tarih, ay, saat, hafta, sayı, e-posta, url, arama, tel ve renk.
Not: Türleri doğru bir şekilde bildirilmezse, girişler tam olarak stillendirilmeyecektir!
Aşağıdaki örnek iki girdi öğesi içerir; metin türünden biri ve parola türünden biri:
Örnek
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
Önyükleme Metin Alanı
Aşağıdaki örnek bir textarea içerir:
Örnek
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Önyükleme Onay Kutuları
Kullanıcının önceden ayarlanmış seçenekler listesinden herhangi bir sayıda seçeneği seçmesini istiyorsanız onay kutuları kullanılır.
Aşağıdaki örnek, üç onay kutusu içerir. Son seçenek devre dışı bırakıldı:
Örnek
<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" value="" disabled>Option 3</label>
</div>
.checkbox-inlineOnay kutularının aynı satırda görünmesini istiyorsanız sınıfı kullanın :
Örnek
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>
Önyükleme Radyo Düğmeleri
Kullanıcıyı önceden ayarlanmış seçenekler listesinden yalnızca bir seçimle sınırlamak istiyorsanız radyo düğmeleri kullanılır.
Aşağıdaki örnek, üç radyo düğmesi içerir. İlk seçenek varsayılan olarak işaretlidir ve son seçenek devre dışıdır:
Örnek
<div class="radio">
<label><input type="radio" name="optradio"
checked>Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
.radio-inlineRadyo düğmelerinin aynı satırda görünmesini istiyorsanız sınıfı kullanın :
Örnek
<label class="radio-inline"><input type="radio" name="optradio"
checked>Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
Önyükleme Seçim Listesi
Kullanıcının birden fazla seçenek arasından seçim yapmasına izin vermek istiyorsanız seçim listeleri kullanılır.
Aşağıdaki örnek bir açılır liste içerir (liste seçin):
Örnek
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>