Bootstrap 4 Formlar

Bootstrap4 Formlar

Bootstrap4'te formların her bir satırı label ve input elemanlarından oluşacak şekilde planlanmıştır. Bir satır oluşturan div'e form-group class değeri verilerek bir satır oluşturulur. Satır içindeki radio ve checkbox dışındaki tüm form elemanları için form-control class özelliği kullanılmaktadır.
Radio butonlar ve checkbox elemanları çok fazla yer kaplamadıkları için bu elemanları kullanırken bootstrap class özellikleri vermeye gerek olmadığını düşünüyorum ancak illaki kullanmak isterseniz buradan istediğiniz bilgilere ulaşabilirsiniz.
Örnek: <form> <div class="form-group"> <label>Email:</label> <input type="email" class="form-control" name="email"> </div> <div class="form-group"> <label>Şifre:</label> <input type="password" class="form-control" name="sifre" > </div> <div class="form-group"> <label>Şehir</label> <select class="form-control"> <option>Edirne</option> <option>Ankara</option> </select> </div> <div class=""> <div>Cinsiyetiniz:</div> Kadın <input type="radio" name="k" class=""> Erkek <input type="radio" name="e" class=""> </div> <div> <div>Hobileriniz</div> Spor <input type="checkbox" name="hobi1" value="spor"> Müzik <input type="checkbox" name="hobi2" value="muzik"> </div> <div class="form-group"> <label>Dosya Ekle:</label> <input type="file" class="form-control-file" name="dosya_ekle" > </div> <button type="submit" class="btn btn-primary">Gönder</button> <button type="reset" class="btn btn-danger">Temizle</button> </form>

Bootstrap4 Yatay Formlar

Bootstrap4'te yatay formlar için form elemanına form-inline özelliği verilmesi gerekir. Ayrıca dikey formlarda bulunan form-group özelliğine ve div'ine gerek yoktur.
Örnek: <form class="form-inline"> <label>Email : </label> <input type="email" class="form-control" name="email"> <label>Şifre : </label> <input type="password" class="form-control" name="sifre" > <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Beni Hatırla </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>

Input Elemanları Büyüklükleri

Form elemanları için normal boy dışında 2 farklı büyüklük tipi vardır.
Küçük boy için => form-control-sm,
büyük boy için => form-control-lg,
sınıf özellikleri verilmelidir.

Yatay Form Sütun Örnek

<form> <div class="form-group row"> <label class="col-3 col-form-label">Email : </label> <div class="col-9"> <input type="text" name="email" class="form-control"> </div> </div> <div class="form-group row"> <label class="col-3 col-form-label">Şifre : </label> <div class="col-9"> <input type="password" name="sifre" class="form-control"> </div> </div> <div class="form-group row"> <label class="col-3 col-form-label">Şehir : </label> <div class="col-9"> <select name="sehir" class="form-control"> <option>Edirne</option> <option>Kars</option> </select> </div> </div> <div class="form-group row"> <label class="col-3 col-form-label">Hobiler : </label> <div class="col-9"> <div> <input class="" type="checkbox"> Spor <input class="" type="checkbox"> Müzik <input class="" type="checkbox"> Resim </div> </div> </div> <div class="form-group row"> <label class="col-3 col-form-label">Cinsiyet : </label> <div class="col-9"> <div> <input class="" type="radio"> Kadın <input class="" type="radio"> Erkek </div> </div> </div> <div class="form-group row"> <label class="col-3 col-form-label">Açıklama : </label> <div class="col-9"> <textarea class="form-control"> </textarea> </div> </div> <div class="form-group row"> <label class="col-3 col-form-label">Dosya Ekle:</label> <div class="col-9"> <input type="file" class="form-control-file" name="dosya_ekle" > </div> </div> <div class="form-group row"> <div class="col text-center"> <input type="submit" value="Formu Gönder" class="btn btn-success" > <input type="reset" value="Temizle" class="btn btn-danger" > </div> </div> </form>


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

Son Yorumlar

İletişim

  • info@frontendokulu.com