Bootstrap - Formulir

Pada bab ini, kita akan mempelajari bagaimana membuat form dengan mudah menggunakan Bootstrap. Bootstrap membuatnya mudah dengan markup HTML sederhana dan kelas yang diperluas untuk berbagai gaya formulir. Pada bab ini kita akan mempelajari bagaimana membuat form dengan mudah menggunakan Bootstrap.

Bentuk Tata Letak

Bootstrap memberi Anda jenis tata letak formulir berikut -

• Bentuk vertikal (default)
• Bentuk sebaris
• Bentuk horizontal

Bentuk Vertikal atau Dasar

Struktur bentuk dasar dilengkapi dengan Bootstrap; kontrol bentuk individu secara otomatis menerima beberapa gaya global. Untuk membuat formulir dasar lakukan hal berikut -

• Tambahkan formulir peran ke elemen <form> induk.

• Bungkus label dan kontrol dalam <div> dengan class .form-group . Ini diperlukan untuk jarak optimal.

• Tambahkan kelas .form-control ke semua elemen <input>, <textarei>, dan <select> tekstual.

<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>

Formulir Inline

Untuk membuat formulir yang semua elemennya sejajar, rata kiri, dan label berada di sampingnya, tambahkan kelas .form-inline ke tag <form>.

<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>

• Secara default input, selects, dan textareas memiliki lebar 100% di Bootstrap. Anda perlu mengatur lebar pada kontrol formulir saat menggunakan formulir sebaris.

• Menggunakan kelas .sr-only Anda dapat menyembunyikan label formulir sebaris.

Bentuk Horizontal

Bentuk horizontal berdiri terpisah dari yang lain tidak hanya dalam jumlah markup, tetapi juga dalam penyajian formulir. Untuk membuat formulir yang menggunakan tata letak horizontal, lakukan hal berikut -

• Tambahkan kelas .form-horizontal ke elemen <form> induk.

• Bungkus label dan kontrol dalam <div> dengan class .form-group .

• Tambahkan kelas .control-label ke label.

<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>

Kontrol Formulir yang Didukung

Bootstrap secara native mendukung kontrol bentuk yang paling umum terutama input, textarea, checkbox, radio, dan select.

Masukan

Bidang teks formulir yang paling umum adalah bidang masukan. Di sinilah pengguna akan memasukkan sebagian besar data formulir penting. Bootstrap menawarkan dukungan untuk semua jenis input HTML5 asli: teks, kata sandi, waktu, tanggal-lokal, tanggal, bulan, waktu, minggu, nomor, email, url, pencarian, telp, dan warna . Deklarasi tipe yang tepat diperlukan untuk membuat Input bergaya sepenuhnya.

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

Textarea

Textarea digunakan saat Anda membutuhkan banyak baris input. Ubah atribut baris seperlunya (lebih sedikit baris = kotak lebih kecil, lebih banyak baris = kotak lebih besar).

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

Kotak Centang dan Tombol Radio

Kotak centang dan tombol radio sangat bagus ketika Anda ingin pengguna memilih dari daftar opsi prasetel.

• Saat membuat formulir, gunakan kotak centang jika Anda ingin pengguna memilih sejumlah opsi dari daftar. Gunakan radio jika Anda ingin membatasi pengguna hanya pada satu pilihan.

• Gunakan kelas .checkbox-inline atau .radio-inline untuk serangkaian kotak centang atau radio untuk kontrol yang muncul di baris yang sama.

Contoh berikut menunjukkan tipe (default dan inline) -

<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>

Memilih

Pilih digunakan saat Anda ingin mengizinkan pengguna untuk memilih dari beberapa opsi, tetapi secara default hanya mengizinkan satu.

• Gunakan <select> untuk opsi daftar yang sudah dikenal pengguna, seperti negara bagian atau angka.

• Gunakan multiple = "multiple" untuk memungkinkan pengguna memilih lebih dari satu opsi.

Contoh berikut menunjukkan kedua jenis (pilih dan banyak) -

<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>

Kontrol Statis

Gunakan kelas .form-control-static pada <p>, saat Anda perlu menempatkan teks biasa di samping label formulir dalam bentuk horizontal.

<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>

Bentuk Status Kontrol

Selain status : focus (yaitu, pengguna mengklik input atau tab di atasnya), Bootstrap menawarkan gaya untuk input dan kelas yang dinonaktifkan untuk validasi formulir.

Fokus Input

Saat masukan menerima : fokus , kerangka masukan dihapus dan bayangan kotak diterapkan.

Lnput yang dinonaktifkan

Jika Anda perlu menonaktifkan input, cukup menambahkan atribut yang dinonaktifkan tidak hanya akan menonaktifkannya; itu juga akan mengubah gaya dan kursor mouse saat kursor berada di atas elemen.

Fieldsets Dinonaktifkan

Tambahkan atribut yang dinonaktifkan ke <fieldset> untuk menonaktifkan semua kontrol dalam <fieldset> sekaligus.

Status Validasi

Bootstrap menyertakan gaya validasi untuk kesalahan, peringatan, dan pesan sukses. Untuk menggunakan, cukup tambahkan kelas yang sesuai ( .has-warning, .has-error, atau .has-success ) ke elemen induk.

Contoh berikut menunjukkan semua status kontrol formulir -

<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>

Ukuran Kontrol Formulir

Anda dapat menyetel tinggi dan lebar formulir menggunakan kelas seperti .input-lg dan .col-lg- * . Contoh berikut menunjukkan ini -

<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>

Teks Bantuan

Kontrol bentuk bootstrap dapat memiliki teks bantuan tingkat blok yang mengalir bersama masukan. Untuk menambahkan blok konten dengan lebar penuh, gunakan blok .help setelah <input>. Contoh berikut menunjukkan ini -

<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>