Bootstrap - Formlar

Bu bölümde, Bootstrap kullanarak formların nasıl kolayca oluşturulacağını inceleyeceğiz. Bootstrap, basit HTML biçimlendirmesi ve farklı form stilleri için genişletilmiş sınıflarla işi kolaylaştırır. Bu bölümde Bootstrap kullanarak formların nasıl kolayca oluşturulacağını inceleyeceğiz.

Form Düzeni

Bootstrap size aşağıdaki form düzeni türlerini sağlar -

Dikey (varsayılan) form
Satır içi form
Yatay form

Dikey veya Temel Form

Temel form yapısı Bootstrap ile birlikte gelir; bireysel form kontrolleri otomatik olarak bazı genel stilleri alır. Temel bir form oluşturmak için aşağıdakileri yapın -

Ana <form> öğesine bir rol formu ekleyin .
Sınıf .form-group ile bir <div> içindeki etiketleri ve denetimleri sarmalayın . Optimum aralık için bu gereklidir.
Tüm metinsel <input>, <textarea> ve <select> öğelerine bir .form-control sınıfı ekleyin .

<form role = "form">

   <div class = "form-group">
      <label for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
      <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>

Satır İçi Form

Tüm öğelerin satır içi, sola hizalanmış ve etiketlerin yan yana olduğu bir form oluşturmak için <form> etiketine .form-inline sınıfını ekleyin .

<form class = "form-inline" role = "form">
   
   <div class = "form-group">
      <label class = "sr-only" for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label class = "sr-only" for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

Varsayılan olarak, Bootstrap'te girdiler, seçimler ve metin alanları% 100 genişliğe sahiptir. Satır içi formu kullanırken form denetimlerinde bir genişlik ayarlamanız gerekir.
Yalnızca .sr sınıfını kullanarak satır içi formların etiketlerini gizleyebilirsiniz.

Yatay Form

Yatay formlar diğerlerinden sadece işaret miktarı açısından değil, formun sunumunda da ayrılmaktadır. Yatay düzeni kullanan bir form oluşturmak için aşağıdakileri yapın -

Ana <form> öğesine bir .form-horizontal sınıfı ekleyin .
Sınıf .form-group ile bir <div> içindeki etiketleri ve denetimleri sarmalayın .
Etiketlere bir .control-label sınıfı ekleyin .

<form class = "form-horizontal" role = "form">
   
   <div class = "form-group">
      <label for = "firstname" class = "col-sm-2 control-label">First Name</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First Name">
      </div>
   </div>
   
   <div class = "form-group">
      <label for = "lastname" class = "col-sm-2 control-label">Last Name</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
      </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>

Desteklenen Form Denetimleri

Bootstrap , giriş, metin alanı, onay kutusu, radyo ve seçme gibi en yaygın biçim denetimlerini yerel olarak destekler .

Girişler

En yaygın form metin alanı giriş alanıdır. Bu, kullanıcıların temel form verilerinin çoğunu gireceği yerdir. Bootstrap, tüm yerel HTML5 giriş türleri için destek sunar: metin, parola, tarih saat, tarih saat-yerel, tarih, ay, saat, hafta, sayı, e-posta, url, arama, tel ve renk . Girdileri tamamen biçimlendirmek için uygun tip beyanı gereklidir .

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Label</label>
      <input type = "text" class = "form-control" placeholder = "Text input">
   </div>
  
</form>

Metin alanı

Metin alanı, birden çok satır girişine ihtiyacınız olduğunda kullanılır. Satır özniteliğini gerektiği gibi değiştirin (daha az satır = daha küçük kutu, daha fazla satır = daha büyük kutu).

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Text Area</label>
      <textarea class = "form-control" rows = "3"></textarea>
   </div>
   
</form>

Onay Kutuları ve Radyo Düğmeleri

Kullanıcıların önceden ayarlanmış seçenekler listesinden seçim yapmasını istediğinizde onay kutuları ve radyo düğmeleri harikadır.

Bir form oluştururken, kullanıcının bir listeden herhangi bir sayıda seçeneği seçmesini istiyorsanız onay kutusunu kullanın . Kullanıcıyı tek bir seçimle sınırlamak istiyorsanız radyoyu kullanın .
Kullanım .checkbox-inline veya yavaş.Radyo-inline kontrolleri için onay kutuları ya da radyolar bir dizi sınıf aynı satırda görünür.

Aşağıdaki örnek, hem (varsayılan hem de satır içi) türleri gösterir -

<label for = "name">Example of Default Checkbox and radio button </label>

<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 = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked> Option 1
   </label>
</div>

<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2">
      Option 2 - selecting it will deselect option 1
   </label>
</div>

<label for = "name">Example of Inline Checkbox and radio button </label>

<div>
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Option 1
   </label>
   
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Option 2
   </label>
   
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox3" value = "option3"> Option 3
   </label>
   
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" checked> Option 1
   </label>
   
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> Option 2
   </label>
</div>

Seçer

Kullanıcının birden çok seçenek arasından seçim yapmasına izin vermek istediğinizde seçim kullanılır, ancak varsayılan olarak yalnızca birine izin verir.

Durumlar veya sayılar gibi kullanıcının aşina olduğu liste seçenekleri için <seç> seçeneğini kullanın.
Kullanıcıların birden fazla seçenek belirlemesine izin vermek için multiple = "multiple" kullanın.

Aşağıdaki örnek, hem (seçme hem de birden çok) türü gösterir -

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Select list</label>
      
      <select class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>

      <label for = "name">Mutiple Select list</label>
      
      <select multiple class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
      
   </div>
	
</form>

Statik Kontrol

Bir <p> üzerinde, yatay bir form içindeki bir form etiketinin yanına düz metin yerleştirmeniz gerektiğinde .form-control-static sınıfını kullanın .

<form class = "form-horizontal" role = "form">
   <div class = "form-group">
      <label class = "col-sm-2 control-label">Email</label>
      
      <div class = "col-sm-10">
         <p class = "form-control-static">[email protected]</p>
      </div>
      
   </div>
   
   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">Password</label>
      
      <div class = "col-sm-10">
         <input type = "password" class = "form-control" id = "inputPassword" placeholder = "Password">
      </div>
      
   </div>
</form>

Form Kontrol Durumları

: Odak durumuna ek olarak (yani, bir kullanıcı girdiyi tıklar veya üzerine sekmeler ekler ), Bootstrap, devre dışı bırakılmış girdiler ve form doğrulama için sınıflar için stil sunar.

Giriş Odağı

Bir girdi alındığında : odak , girdinin ana hatları kaldırılır ve bir kutu gölgesi uygulanır.

Devre dışı girişler

Bir girişi devre dışı bırakmanız gerekirse, devre dışı bırakılmış özniteliği eklemek yalnızca onu devre dışı bırakmaz; imleç öğenin üzerine geldiğinde stil ve fare imlecini de değiştirecektir.

Devre Dışı Alan Kümeleri

<fieldset> içindeki tüm kontrolleri aynı anda devre dışı bırakmak için bir <fieldset> alanına devre dışı bırakılmış özniteliği ekleyin.

Doğrulama Durumları

Bootstrap, hatalar, uyarılar ve başarı mesajları için doğrulama stilleri içerir. Kullanmak için, ana öğeye uygun sınıfı ( .has-warning, .has-error veya .has-success ) eklemeniz yeterlidir .

Aşağıdaki örnek, tüm form kontrol durumlarını gösterir -

<form class = "form-horizontal" role = "form">
   <div class = "form-group">
      <label class = "col-sm-2 control-label">Focused</label>
      <div class = "col-sm-10">
         <input class = "form-control" id = "focusedInput" type = "text" value = "This is focused...">
      </div>
   </div>
   
   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">
         Disabled
      </label>
      <div class = "col-sm-10">
         <input class = "form-control" id = "disabledInput" type = "text" placeholder = "Disabled input here..." disabled>
      </div>
   </div>
   
   <fieldset disabled>
      <div class = "form-group">
         <label for = "disabledTextInput" class = "col-sm-2 control-label">
            Disabled input (Fieldset disabled)
         </label>
         <div class = "col-sm-10">
            <input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Disabled input">
         </div> 
      </div>
      
      <div class = "form-group">
         <label for = "disabledSelect" class = "col-sm-2 control-label"> 
            Disabled select menu (Fieldset disabled)
         </label>
         <div class = "col-sm-10">
            <select id = "disabledSelect" class = "form-control"> 
               <option>Disabled select</option>
            </select> 
         </div>
      </div> 
   </fieldset>
   
   <div class = "form-group has-success">
      <label class = "col-sm-2 control-label" for = "inputSuccess">
         Input with success
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputSuccess">
      </div>
   </div>
   
   <div class = "form-group has-warning">
      <label class = "col-sm-2 control-label" for = "inputWarning">
         Input with warning
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputWarning">
      </div>
   </div>
   
   <div class = "form-group has-error">
      <label class = "col-sm-2 control-label" for = "inputError">
         Input with error
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputError">
      </div>
   </div>
</form>

Form Kontrolü Boyutlandırma

Sırasıyla .input-lg ve .col-lg- * gibi sınıfları kullanarak formların yüksekliklerini ve genişliklerini ayarlayabilirsiniz . Aşağıdaki örnek bunu göstermektedir -

<form role = "form">

   <div class = "form-group">
      <input class = "form-control input-lg" type = "text" placeholder =".input-lg">
   </div>

   <div class = "form-group">
      <input class = "form-control" type = "text" placeholder = "Default input">
   </div>

   <div class = "form-group">
      <input class = "form-control input-sm" type = "text" placeholder = ".input-sm">
   </div>
   
   <div class = "form-group"></div>
   
   <div class = "form-group">
      <select class = "form-control input-lg">
         <option value = "">.input-lg</option>
      </select>
   </div>
   
   <div class = "form-group">
      <select class = "form-control">
         <option value = "">Default select</option>
      </select>
   </div>
   
   <div class = "form-group">
      <select class = "form-control input-sm">
         <option value = "">.input-sm</option>
      </select>
   </div>

   <div class = "row">
      <div class = "col-lg-2">
         <input type = "text" class = "form-control" placeholder = ".col-lg-2">
      </div>
      
      <div class = "col-lg-3">
         <input type = "text" class = "form-control" placeholder = ".col-lg-3">
      </div>
      
      <div class = "col-lg-4">
         <input type = "text" class = "form-control" placeholder = ".col-lg-4">
      </div>
      
   </div>
</form>

Yardım Metni

Bootstrap form kontrolleri, girişlerle birlikte akan blok düzeyinde bir yardım metnine sahip olabilir. Tam genişlikte bir içerik bloğu eklemek için , <input> 'dan sonra .help-bloğunu kullanın . Aşağıdaki örnek bunu göstermektedir -

<form role = "form">
   <span>Example of Help Text</span>
   <input class = "form-control" type = "text" placeholder = "">
   
   <span class = "help-block">
      A longer block of help text that breaks onto a new line and may extend beyond one line.
   </span>
	
</form>