Bootstrapta Form Uygulamaları

Bu makalemizde bootstrap kullanarak web sayfalarında kolayca form oluşturmayı ele alacağız. 

Bootstrapta 3 tip form düzeni vardır:

             1- Dikey (Vertical-Temel)  formu    

             2- Yatay (Horizontal) formu                            
            
             3- İnline (Satır içi)  formu

Vertical (Dikey-Temel) Formu :

Form grupları arasında aralıkları ideal yapmak için div class ına form-group verilir.

Örnek kodları:

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder=
    "Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder=
    "Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Bu örnekte iki giriş alanı, bir dosya ekleme alanı. bir onay kutusu (checkbox)  ve bir gönder butonu ile bir dikey formu oluşturulmuştur.  

Yatay (Horizontal) Form :

Örnek Kodları :

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder=
      "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">Sign in</button>
    </div>
  </div>
</form>

İnline (satır içi) Formu :

Bu formda bütün  form öğeleri, satır içi sola hizalı ve etiketleri de yanında bulunur. Bu uygulama sadece 768 px genişliğine kadar olan görünümler için geçerlidir.

Örnek kodları: 

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder=
    "jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

Form Kontrol Elemanları :

Bootstrapın desteklediği form kontrol elemanları şunlardır.

• input (giriş)
• textarea (text alanı)
• checkbox (onay kutuları)
• radio (radyo butonlar)
• select list (açılır listeleme)

Bootstrap input (giriş) kullanımı :

Bootstrapın input girişlerinde girişlerin type özelliği düzgün beyan edilmelidir.

Aşağıda tek satırlık bir metin girişi kodu örneği görülmektedir.

<input type="text" class="form-control" placeholder="Text input">

Bootstrap textarea (text alanı) kullanımı :

Birden fazla satırlık metin girişilerinde textarea kullanılır. Daha çok web sayfalarında yorum için kullanılır

Aşağıda 3 satırlık bir textarea kodu örneği görülmektedir.

<textarea class="form-control" rows="3"></textarea>

Checkbox (onay kutuları)ve Radio Butonları :

Formlarda önceden ayarlanmış birden fazla seçenekten birini seçmek için kullanılır. Ayrıca sınıfına checkbox disabled veya radio disabled verilerek üzerine gelindiğinde izin verilmiyor işareti çıkarılır.

Aynı satırda görünmesi istenirse checkbox.inline veya radio-inline sınıfları kullanılır.

Kodları aşağıdaki gibidir :

Son seçenekler disabled (devre dışı) dır.

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

Açılır Listeler (select list) :

Eğer kullanıcıya birden çok seçenek vermek istiyorsanız formlarınızda açılır liste kullanabilirsiniz. Bunu iki şekilde yapmak mümkündür.

1-Listeden birini seçin şeklinde kapalı açılır liste.

2-Birden fazla seçme listesi. (fare ile kaydırarak veya control tuşu ile)  

Kodları:

Tekli Seçim Kodu:

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Çoklu Seçim Kodu:

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

ÖRNEKLERİ GÖRÜNTÜLE:

Bootstarpta Form oluşturma ile ilgili anlatımı görsel olarak aşağıda ki videodan veya youtube kanalımdan da izleyebilirsiniz.